我现在是重新加载新的html加载html无感加载怎么实现修改要求：使用Ajax异步加载HTML内容并替换主体内容。首先需要修改HTML的结构将所有导航按钮的href属性更改为data-href或其他自定义属性名称。然后使用JavaScriptjQuery为导航按钮添加点击事件使用Ajax异步加载HTML内容下面是我的代码：!DOCTYPE htmlhtml head meta charset=u
<!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>
<style>
.bOCQwB {
padding: 2rem 0px;
background: rgb(51, 51, 51);
border-radius: 3px;
color: rgb(255, 255, 255);
display: flex;
place-content: center space-around;
height: 10rem;
}
.dEyqWV {
min-width: 210.214px;
width: 210.214px;
padding: 1.6rem;
border-bottom: 0.1rem solid rgb(244, 246, 248);
background: rgb(255, 255, 255);
white-space: nowrap;
}
.clrCal {
min-width: 314.667px;
width: 314.667px;
border-bottom: 0.1rem solid rgb(196, 205, 213);
border-top: 0.1rem solid rgb(223, 227, 232);
padding: 1.6rem;
background: rgb(255, 255, 255);
white-space: nowrap;
}
.cAbmHr > * {
transition: background-color 0.2s ease-in-out 0s;
}
.cxQEXx {
min-width: 157.333px;
width: 157.333px;
border-bottom: 0.1rem solid rgb(196, 205, 213);
border-top: 0.1rem solid rgb(223, 227, 232);
padding: 1.6rem;
background: rgb(255, 255, 255);
white-space: nowrap;
}
.bfqBUk {
padding: 1rem;
width: 100%;
display: flex;
flex-direction: column;
-webkit-box-pack: center;
place-content: center;
text-align: center;
}
<p>.bfqBUk:not(:first-child) {
border-left: 1px solid rgb(255, 255, 255);
}</p>
<pre><code> /* 下拉列表容器的样式 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉列表的样式 */
.dropdown-content {
margin-top: 5px;
display: none;
position: absolute;
top: 100%; /* 将下拉列表放置在按钮下方 */
left: 0; /* 将下拉列表与按钮左对齐 */
background-color: #f9f9f9;
width: 100px; /* 设置下拉列表的宽度为200px */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* 下拉列表中的选项样式 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 鼠标悬停时选项的背景色 */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter" style="margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;">
<div class="Polaris-Stack__Item">
<div class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter">
<div class="Polaris-Stack__Item">
<div class="sc-1ibht3l-0 uqRZq">
</div>
<div class="sc-1ibht3l-1 hIZedH">
<div class="Polaris-ButtonGroup">
<div class="Polaris-ButtonGroup__Item">
<a data-polaris-unstyled="true" class="Polaris-Button" data-href="index.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Dashboard</span>
</span>
</a>
</div>
<div class="Polaris-ButtonGroup__Item">
<a data-polaris-unstyled="true" class="Polaris-Button" data-href="zone.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Checkout Zones</span>
</span>
</a>
</div>
<div class="Polaris-ButtonGroup__Item">
<a data-polaris-unstyled="true" class="Polaris-Button" data-href="funnel.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Funnels</span>
</span>
</a>
</div>
<div class="Polaris-ButtonGroup__Item">
<a data-polaris-unstyled="true" class="Polaris-Button" data-href="help.html">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Help Center</span>
</span>
</a>
</div>
<div class="Polaris-ButtonGroup__Item">
<div>
<button type="button" id="moreSeting" class="Polaris-Button" tabindex="0" aria-controls="Popover486" aria-owns="Popover486" aria-haspopup="true" aria-expanded="false">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">More</span>
<span class="Polaris-Button__Icon">
<span class="Polaris-Icon">
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path>
</svg>
</span>
</span>
</span>
<div id="dropdownContent" class="dropdown-content">
<!-- 这里放下拉列表的内容 -->
<a data-href="payment.html">Payment</a>
<a data-href="facebookPixel.html">Pixel</a>
</div>
</button>
</div>
</div
</code></pre>
原文地址: http://www.cveoy.top/t/topic/imLi 著作权归作者所有。请勿转载和采集!