Bootstrap:多页(div)和导航栏

Question

我想使用这个流行的模板:

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>

非常感谢!

Answer 1

您需要使用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");
    });
});

在这种情况下,href您的URL 的值应始终为"#",data-page="about"如果您希望它显示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
    });
});

您可以在此页面上阅读以了解Bootstrap如何执行此操作,因此您无需自己编写.