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屋!