Bootstrap: Multiple pages (divs) and navbar

Question

i would like to use this popular template:

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

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

This must look something like this:

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

But how to "link" from the nav-tabs to the divs?

This doesn't work:

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

Many thanks!

Answer 1

You need to use JavaScript and JQuery to do this.

There are multiple ways to achieve this.

Option 1

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");
    });
});

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.

Option 2

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>

Your JavaScript file:

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

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