无缝加载 HTML 页面 - 使用 JavaScript 或 jQuery
<!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;
}
<pre><code> .bfqBUk:not(:first-child) {
border-left: 1px solid rgb(255, 255, 255);
}
/* 下拉列表容器的样式 */
.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" 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" 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" 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" 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 href="payment.html">Payment</a>
<a href="facebookPixel.html">Pixel</a>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
内容：要实现无缝加载技术将其他HTML加载到当前HTML中，可以使用JavaScript的fetch()方法或者jQuery的load()方法来实现。
</code></pre>
<p>使用fetch()方法的示例代码如下：</p>
<pre><code class="language-javascript">fetch('funnel.html')
.then(response => response.text())
.then(data => {
document.getElementById('content').innerHTML = data;
});
</code></pre>
<p>上述代码将funnel.html文件请求并获取到响应后，将响应内容设置到id为content的元素中。</p>
<p>使用jQuery的load()方法的示例代码如下：</p>
<pre><code class="language-javascript">$('#content').load('funnel.html');
</code></pre>
<p>上述代码将funnel.html文件加载到id为content的元素中。</p>
<p>需要注意的是，要保证无缝加载的效果，被加载的HTML文件中不应包含与当前HTML文件冲突的CSS和JavaScript代码。</p>
原文地址: https://www.cveoy.top/t/topic/p4MA 著作权归作者所有。请勿转载和采集!