Bootstrap: multiple pages (divs) and navbar

Question

I would like to use this popular template:

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

I do not want to refer to about.htm or contact.htm, this content should be inside the template (several pages / div).

It should 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" with navigation tabs with divs?

This does not 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> 

Thank you very much!

Answer 1

For this you need to use JavaScript and jQuery.

There are several ways to do this.

Option 1

Create index.html, specify <div class="container"> and leave this field blank. 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 must give it data-page="about" if you want it to display the about page.

Option 2

Create all divs on 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 on this page to find out how Bootstrap does this, so you don't have to write it yourself.

Answer 2

If all you are trying to do is put all the content on one page, then it will be as simple as in your example. Here's a link showing the working version of what you want.

Refer to this JsFiddle jaketaylor

Not sure if you noticed it or not, but in the template all links to the navbar are directed to # ... which is the top of your index page.

I just changed this by adding section names.

  <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> 

Please let me know if this is what you are looking for. If not sure, I can help

Answer 3

Ruben Ratten's code did not work for me, but it gave me a rough idea of ​​what to do.

Here is a working example:

index.html

 <a href="#" data-page="home">Home Link</a> <a href="#" data-page="someOther">some other Link</a> ... <div class"container" id="mainContainer"></div> 

home.html

 <div>Hello World</div> 

someOther.html

 <div>Hello World 2</div> 

main.js

 $('ul.navbar-nav li a').each((i, item) => { if ($(item).attr('data-page')) { $(item).on('click', (element) => { $('#mainContainer').load($(element.target).attr('data-page')+'.html'); }); } });