无缝加载 HTML 页面：使用 jQuery 的 load() 方法
<!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>
<pre><code></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="javascript:void(0);" class="loadContent" data-url="payment.html">Payment</a>
<a href="javascript:void(0);" class="loadContent" data-url="facebookPixel.html">Pixel</a>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Stack__Item">
<div class="Polaris-Stack Polaris-Stack--spacingTight">
<div class="Polaris-Stack__Item">
<div class="sc-1pokqsy-0 dqXEel">
<div tabindex="-1" aria-controls="Popover493" aria-owns="Popover493" aria-haspopup="true" aria-expanded="false">
<div class="sc-1pokqsy-1 fQGSrj">
<div class="Polaris-Stack Polaris-Stack--spacingExtraTight Polaris-Stack--alignmentCenter">
<div class="Polaris-Stack__Item">
<p>Status: </p>
</div>
<div class="Polaris-Stack__Item">
<span class="Polaris-Badge Polaris-Badge--statusSuccess">
<span class="Polaris-VisuallyHidden">Success</span>Enabled
</span>
</div>
<div class="Polaris-Stack__Item">
<span class="Polaris-Icon Polaris-Icon--colorInkLightest Polaris-Icon--isColored">
<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>
</div>
</div>
</div>
</div>
<div class="ynsxbt-0 iqzcmc" style="display: none;">
<div class="ynsxbt-1 fHRVPN">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing">
<div class="Polaris-Stack__Item">
<h2 class="Polaris-Heading">Disable PPFunnels?</h2>
</div>
<div class="Polaris-Stack__Item">
<div class="ynsxbt-2 gYaAIi">
<span class="Polaris-Icon Polaris-Icon--colorInkLightest Polaris-Icon--isColored">
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M11.414 10l6.293-6.293a.999.999 0 1 0-1.414-1.414L10 8.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L8.586 10l-6.293 6.293a.999.999 0 1 0 1.414 1.414L10 11.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z" fill-rule="evenodd"></path>
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="ynsxbt-3 bZoarq">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-TextContainer">
<p>All PPFunnels features will be disabled.</p>
<p>Checkouts will be processed by Shopify.</p>
</div>
</div>
</div>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-Stack Polaris-Stack--distributionTrailing">
<div class="Polaris-Stack__Item">
<div class="Polaris-ButtonGroup">
<div class="Polaris-ButtonGroup__Item">
<button type="button" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Cancel</span>
</span>
</button>
</div>
<div class="Polaris-ButtonGroup__Item">
<button type="button" class="Polaris-Button Polaris-Button--destructive">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Disable PPFunnels</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app/js/index.js"></script>
<!-- 在文档加载完成后执行以下脚本 -->
<script>
</code></pre>
<p>// 点击按钮时触发事件
$("#moreSeting").click(function(e) {
e.stopPropagation(); // 阻止事件冒泡，防止立即隐藏下拉列表
var dropdown = $("#dropdownContent");
dropdown.toggle();
});</p>
<p>// 点击页面其他地方时隐藏下拉列表
$(document).click(function(e) {
var dropdown = $("#dropdownContent");
// 检查点击事件是否发生在下拉列表以外的区域
if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) {
dropdown.hide();
}
});</p>
<p>// 为下拉列表中的链接添加点击事件
$(document).on('click', '.loadContent', function() {
var url = $(this).data('url');
// 使用 load() 方法将 HTML 文件加载到容器中
$("#container").load(url);
});
</script>
<script type="text/javascript" src="https://uzi666.top/shopline_admin_statuc/css/layui/layui.js" charset="utf-8"></script>
</body></p>
</html>
原文地址: https://www.cveoy.top/t/topic/p4N8 著作权归作者所有。请勿转载和采集!