我想使用这个流行的模板：
http://getbootstrap.com/examples/navbar/
我不想链接到about.htm或contact.htm,这个内容应该在模板内(多个页面/ div).
这看起来像这样：
<div> <div id="home">home...</div> <div id="about">about...</div> <div id="contact">contact...</div> </div>
但是如何从nav-tabs到divs“链接”？
这不起作用：
<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>
非常感谢！
解决方法
您需要使用JavaScript来执行此操作.
有多种方法可以实现这一目标.
选项1
创建一个index.html,指定一个< 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");
});
});
在这种情况下,您的URL的href值应该始终为“#”,如果您希望它显示about页面,您应该给它一个data-page =“about”.
选项2
在一个页面中创建所有div,给它们一个隐藏它们的类,使用jQuery隐藏所有div但是要显示的那个div.
<div class="container">
<div id="home"></div>
<div id="about" class="hidden"></div>
<div id="contact" class="hidden"></div>
</div>
你的JavaScript文件：
$("ul.navbar-nav li").each(function() {
$(this).on("click",function{
// Toggle classes of divs
});
});
您可以阅读on this page来了解Bootstrap是如何做到的,因此您无需自己编写.
