我创建了一个具有以下结构的网页:
使用侧边菜单的主 html； 辅助 html 包含我想在主 html 中显示的信息。
我想实现以下目标。假设辅助 html 有一个名为 intro 的部分。我想将该部分链接到菜单项。因此，当我按下相应的按钮时，我想在我的主 html 中显示从 #intro 部分开始的辅助 html。
这是我在主 html 中的侧边栏导航
<div id="main">
<div class="wrapper">
<!-- LEFT SIDEBAR NAV-->
<aside id="left-sidebar-nav">
<ul id="slide-out" class="side-nav leftside-navigation">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-blue active"><i class="mdi-action-view-carousel"></i> Field</a>
<div class="collapsible-body">
<ul>
<li class="active"><a href="#intro">Intro</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
</aside>
</div>
这是第二个 html 中的部分。
<div class="divider"></div>
<div class="section" id="intro">
<li style="list-style: disc">
some text.
</li>
</div>
</div>
当我按下左侧导航栏中的“介绍”按钮时，我想在主 html 中打开“介绍”部分的第二个按钮。
我想在我的主 HTML 中加载第二个 html 的原因是它使用不同的 css 样式，如果我合并它们，它会破坏我的格式。
有什么解决办法吗？
谢谢!
最佳答案
可以通过 jQuery 轻松实现:
这是我的建议:
步骤 1
首先，确保 secondary.html 中有这些部分文件:
<div id="intro">Intro section</div>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
安，在 main.html ，确保您有一个带有 id=content 的元素。这将是您的占位符。像这样:
<div id="content"></div>
步骤 2
修改你的 anchor :
- 点
href到虚拟 URL (#)。 - 添加一个类，以便我们可以使用 jQuery 捕获它。我在这里命名为
btn-load-section. - 添加
data-属性，以便我们可以向每个 anchor 添加一些有用的数据，以便稍后获取。我在这里添加了data-url和data-section.
像这样:
<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="intro">Intro</a>
<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="section1">Section 1</a>
<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="section2">Section 2</a>
<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="section3">Section 3</a>
步骤 3
在我们的 <body> 的末尾部分(在 main.html 中)，您可以添加以下代码:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
/*
Executes the script inside the anonymous function
only when the page is loaded
*/
$(document).ready(function() {
/*
select all anchors with 'btn-load-section' class (class = dot before)
and bind a click event
*/
$("a.btn-load-section").on("click", function(e) {
e.preventDefault(); //this cancel the original event: the browser stops here
var url = $(this).data('url'); //get the data-url attribute from the anchor
var section = $(this).data('section'); //get the data-section attribute from the anchor
var contentDiv = $("#content"); //select the div with the ID=content (id = hash before). This will be our target div.
/*
executes the jQuery .load function
It will load the url and search for the correspondent section (load page fragment)
e.g. will call load with "secondary.html #intro" (#intro is our fragment on the secondary.html page).
*/
contentDiv.load(url + " #" + section);
});
});
</script>
由于我不知道您对 jQuery 的熟悉程度，所以我添加了一些评论。
第一个脚本标签从 CDN 加载 jQuery。
您可以阅读有关 jQuery 的更多信息 .load功能here 。但基本上它允许加载页面片段:
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
这只是一种可能的方法。希望对您有帮助!
关于javascript - 侧面菜单包含指向 Iframe 中各部分的链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42078451/