实现无感页面跳转 - 使用 JavaScript 和 AJAX - 常规

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
		<link rel="stylesheet" href="https://uzi666.top/shopline_admin_statuc/css/layui/css/layui.css">
		<script src="app/js/echarts.min.js"></script>
		<title>Dashboard</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="script.js"></script>
	</head>
	<body>
<pre><code>	&lt;div class=&quot;Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter&quot; style=&quot;margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;&quot;&gt;
		&lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
			&lt;div class=&quot;Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter&quot;&gt;
				&lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
					&lt;div class=&quot;sc-1ibht3l-0 uqRZq&quot;&gt;
						
					&lt;/div&gt;
					&lt;div class=&quot;sc-1ibht3l-1 hIZedH&quot;&gt;
						&lt;div class=&quot;Polaris-ButtonGroup&quot;&gt;
							&lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
								&lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;index.html&quot;&gt;
									&lt;span class=&quot;Polaris-Button__Content&quot;&gt;
										&lt;span class=&quot;Polaris-Button__Text&quot;&gt;Dashboard&lt;/span&gt;
									&lt;/span&gt;
								&lt;/a&gt;
							&lt;/div&gt;
							&lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
								&lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;zone.html&quot;&gt;
									&lt;span class=&quot;Polaris-Button__Content&quot;&gt;
										&lt;span class=&quot;Polaris-Button__Text&quot;&gt;Checkout Zones&lt;/span&gt;
									&lt;/span&gt;
								&lt;/a&gt;
							&lt;/div&gt;
							&lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
								&lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;funnel.html&quot;&gt;
									&lt;span class=&quot;Polaris-Button__Content&quot;&gt;
										&lt;span class=&quot;Polaris-Button__Text&quot;&gt;Funnels&lt;/span&gt;
									&lt;/span&gt;
								&lt;/a&gt;
							&lt;/div&gt;
							&lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
								&lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;help.html&quot;&gt;
									&lt;span class=&quot;Polaris-Button__Content&quot;&gt;
										&lt;span class=&quot;Polaris-Button__Text&quot;&gt;Help Center&lt;/span&gt;
									&lt;/span&gt;
								&lt;/a&gt;
							&lt;/div&gt;
							&lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
								&lt;div&gt;
									&lt;button type=&quot;button&quot; id=&quot;moreSeting&quot; class=&quot;Polaris-Button&quot; tabindex=&quot;0&quot; aria-controls=&quot;Popover486&quot; aria-owns=&quot;Popover486&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
										&lt;span class=&quot;Polaris-Button__Content&quot;&gt;
											&lt;span class=&quot;Polaris-Button__Text&quot;&gt;More&lt;/span&gt;
											&lt;span class=&quot;Polaris-Button__Icon&quot;&gt;
												&lt;span class=&quot;Polaris-Icon&quot;&gt;
													&lt;svg viewBox=&quot;0 0 20 20&quot; class=&quot;Polaris-Icon__Svg&quot; focusable=&quot;false&quot; aria-hidden=&quot;true&quot;&gt;
														&lt;path d=&quot;M5 8l5 5 5-5z&quot; fill-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
													&lt;/svg&gt;
												&lt;/span&gt;
											&lt;/span&gt;
										&lt;/span&gt;
										&lt;div id=&quot;dropdownContent&quot; class=&quot;dropdown-content&quot;&gt;
											&lt;!-- 这里放下拉列表的内容 --&gt;
											&lt;a href=&quot;payment.html&quot;&gt;Payment&lt;/a&gt;
											&lt;a href=&quot;facebookPixel.html&quot;&gt;Pixel&lt;/a&gt;
										&lt;/div&gt;
									&lt;/button&gt;
									
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/body&gt;
</code></pre>
</html>
<script>
$(document).ready(function() {
  $('.Polaris-ButtonGroup__Item a').click(function(e) {
    e.preventDefault(); // 阻止默认的页面跳转行为
    
    var url = $(this).attr('href'); // 获取点击链接的地址
    $.ajax({
      url: url,
      success: function(data) {
        $('body').html(data); // 将返回的页面内容替换当前页面的内容
        history.pushState(null, '', url); // 修改当前页面的URL，以便可以通过浏览器前进后退按钮导航
      }
    });
  });
});
</script>