Bootstrap：多页（div）和导航栏 [英] Bootstrap: Multiple pages (divs) and navbar

问题描述

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

i would like to use this popular template:

http://getbootstrap.com/examples/navbar/

我不想链接到about.htm或contact.htm，这个内容应该在模板内（多个页面/ div）。

I don't want to link to about.htm or contact.htm, this content should be inside the template (multiple pages / divs).

这必须如下所示：

<div>
<div id="home">home...</div>
<div id="about">about...</div>
<div id="contact">contact...</div>
</div>

但是如何从nav-tabs链接到div？

But how to "link" from the nav-tabs to the 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来执行此操作。

You need to use JavaScript to do this.

有多种方法可以实现此目的。

There are multiple ways to achieve this.

创建index.html，指定< div class =container> 并将其留空。然后使用jQuery将 home.html 加载到 .container 对象中，并对所有其他页面执行相同的操作。

Create an index.html, specify a <div class="container"> and leave this empty. Then use jQuery to load home.html into the .container object, and do the same for all other pages.

$(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 的值为您的网址应该始终为＃，如果您希望它显示关于页面的话，您应该给它一个 data-page =about。

In this case, the href value of your URL should always be "#" and you should give it a data-page="about" if you want it to show the about page.

在一个页面中创建所有div，给它们一个隐藏它们的类，使用jQuery隐藏所有div但是你想要展示的。

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 class="container">
    <div id="home"></div>
    <div id="about" class="hidden"></div>
    <div id="contact" class="hidden"></div>
</div>

您的JavaScript文件：

Your JavaScript file:

$("ul.navbar-nav li").each(function() {
    $(this).on("click", function{
        // Toggle classes of divs
    });
});

您可以阅读在这个页面上，看看Bootstrap如何做到这一点，所以你不必自己编写。

You can read up on this page to see how Bootstrap does it, so you don't have to write it yourself.

这篇关于Bootstrap：多页（div）和导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！