我想使用这个流行的模板：
http://getbootstrap.com/examples/navbar/
我不想链接到about.htm或contact.htm,这个内容应该在模板内(多个页面/ div).
这看起来像这样：
@H_404_8@<div> <div id="home">home...</div> <div id="about">about...</div> <div id="contact">contact...</div> </div>但是如何从nav-tabs到divs“链接”？
这不起作用：
@H_404_8@<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对象中,并对所有其他页面执行相同操作.
@H_404_8@$(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.
@H_404_8@<div class="container"> <div id="home"></div> <div id="about" class="hidden"></div> <div id="contact" class="hidden"></div> </div>你的JavaScript文件：
@H_404_8@$("ul.navbar-nav li").each(function() { $(this).on("click",function{ // Toggle classes of divs }); });您可以阅读on this page来了解Bootstrap是如何做到的,因此您无需自己编写.
