Javascript Bootstrap：多个页面（div）和导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27139963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Multiple pages (divs) and navbar
提问by WeekendCoder
i would like to use this popular template:
我想使用这个流行的模板：
http://getbootstrap.com/examples/navbar/
http://getbootstrap.com/examples/navbar/
I don't want to link to about.htm or contact.htm, this content should be inside the template (multiple pages / divs).
我不想链接到about.htm 或contact.htm，这个内容应该在模板里面（多个页面/div）。
This must look something like this:
这必须看起来像这样：
<div>
<div id="home">home...</div>
<div id="about">about...</div>
<div id="contact">contact...</div>
</div>
But how to "link" from the nav-tabs to the divs?
但是如何从导航标签“链接”到 div？
This doesn't work:
这不起作用：
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
Many thanks!
非常感谢！
回答by Ruben Rutten
You need to use JavaScript and JQuery to do this.
您需要使用 JavaScript 和 JQuery 来执行此操作。
There are multiple ways to achieve this.
有多种方法可以实现这一点。
Option 1
选项1
Create an index.html, specify a <div class="container">and leave this empty. Then use jQuery to load home.htmlinto the .containerobject, and do the same for all other pages.
创建一个 index.html，指定 a<div class="container">并将其留空。然后使用 jQuery 加载home.html到.container对象中，并对所有其他页面执行相同操作。
$(document).ready(function() {
$(".container").load("home.html");
});
$("ul.navbar-nav li").each(function() {
$(this).on("click", function{
$(".container").load($(this).attr("data-page")+".html");
});
});
In this case, the hrefvalue of your URL should always be "#" and you should give it a data-page="about"if you want it to show the about page.
在这种情况下，href您的 URL的值应始终为“#”，data-page="about"如果您希望它显示关于页面，则应该给它一个。
Option 2
选项 2
Create all the divs in one page, give them a class that hides them, use jQuery to hide all divs BUT the one you want to show.
在一个页面中创建所有 div，给它们一个隐藏它们的类，使用 jQuery 隐藏所有 div，但要显示的那个。
<div class="container">
<div id="home"></div>
<div id="about" class="hidden"></div>
<div id="contact" class="hidden"></div>
</div>
Your JavaScript file:
您的 JavaScript 文件：
$("ul.navbar-nav li").each(function() {
$(this).on("click", function{
// Toggle classes of divs
});
});
You can read up on this pageto see how Bootstrap does it, so you don't have to write it yourself.
您可以在此页面上阅读以了解 Bootstrap 如何做到这一点，因此您不必自己编写。
回答by Jake Taylor
If all you're trying to do is put your content all on a single page then it's just as simple as you have in your example. Here's a link showing a working version of what you want.
如果您要做的只是将所有内容放在一个页面上，那么它就像您在示例中所做的一样简单。这是一个链接，显示了您想要的工作版本。
Refer this JsFiddle by jaketaylor
Not sure whether you noticed it or not but in the template all of the navbar links are directed to #...which is the top of your index page.
不确定您是否注意到它，但在模板中，所有导航栏链接都指向#...这是您索引页面的顶部。
I just changed this by adding the section names.
我只是通过添加部分名称来改变它。
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
Please let me know if this is what you're looking for. If not Im sure I can help
如果这就是您要找的，请告诉我。如果不是我确定我可以帮忙
回答by David Schumann
Ruben Ruttens code did not work for me, but gave me a rough Idea on what to do.
Ruben Ruttens 的代码对我不起作用，但给了我一个粗略的想法。
Here is a working example:
这是一个工作示例：
index.html
索引.html
<a href="#" data-page="home">Home Link</a>
<a href="#" data-page="someOther">some other Link</a>
...
<div class"container" id="mainContainer"></div>
home.html
主页.html
<div>Hello World</div>
someOther.html
someOther.html
<div>Hello World 2</div>
main.js
主文件
$('ul.navbar-nav li a').each((i, item) => {
if ($(item).attr('data-page')) {
$(item).on('click', (element) => {
$('#mainContainer').load($(element.target).attr('data-page')+'.html');
});
}
});
