javascript – Bootstrap：多个页面(div)和导航栏

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

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是如何做到的,因此您无需自己编写.

javascript – Bootstrap：多个页面(div)和导航栏

解决方法

猜你在找的JavaScript相关文章