Bootstrap：多个页面（div）和导航栏
我想使用这个流行的模板：
http://getbootstrap.com/examples/navbar/
我不想链接到about.htm或contact.htm，这个内容应该在模板里面（多个页面/ div）。
这看起来像这样：
home... about... contact... 但是如何从nav-tabs到divs“链接”？
这不起作用：
非常感谢！
您需要使用JavaScript来执行此操作。
有多种方法可以实现这一目标。
选项1
创建一个index.html，指定一个
并将其留空。 然后使用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"); }); });
在这种情况下，您的URL的href值应始终为“＃”，如果您希望它显示about页面，您应该给它一个data-page="about" 。
选项2
在一个页面中创建所有div，给它们一个隐藏它们的类，使用jQuery隐藏所有div但是要显示的那个div。
你的JavaScript文件：
$("ul.navbar-nav li").each(function() { $(this).on("click", function{ // Toggle classes of divs }); });
您可以在此页面上阅读以了解Bootstrap如何执行此操作，因此您无需自行编写。
如果您要做的只是将您的内容全部放在一个页面上，那么它就像您在示例中一样简单。 这是一个显示您想要的工作版本的链接。
由jaketaylor引用这个JsFiddle
不确定您是否注意到它，但在模板中，所有导航栏链接都指向＃…这是索引页面的顶部。
我只是通过添加部分名称来改变它。
About Contact
如果您正在寻找，请告诉我。 如果没有，我相信我可以提供帮助
Ruben Ruttens代码对我不起作用，但给了我一个关于该怎么做的粗略想法。
这是一个工作示例：
的index.html
Home Link some other Link ...
home.html的
Hello World
someOther.html
Hello World 2
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'); }); } });