Bootstrap: Multiple pages (divs) and navbar

javascript, jquery, twitter-bootstrap

Solution

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.

Problem

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!

Original source