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!

Are you saying that you want your About and Contact Pages on the same page and your navigation to link to them this way? — Jake Taylor, Nov 26 '14 at 01:51

score 8 · Answer 1 · edited Oct 14 '19 at 05:36

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.

score 0 · Answer 2 · edited Nov 26 '14 at 04:11

0

If all you're trying to do is put your content all on a single page then it's just as simple as you have in your example. Here's a link showing a working version of what you want.

Refer this JsFiddle by jaketaylor

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

I just changed this by adding the 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're looking for. If not Im sure I can help

edited Nov 26 '14 at 04:11

BomberMan

1,094
3
13
33

answered Nov 26 '14 at 02:16

Jake Taylor

4,246
3
15
16

In your example, clicking About will replace the whole page. Where can I define what will be replaced (ie to retain the navbar and footer) ? – Willem Nov 28 '17 at 10:59
1

@Willem It actually doesn't replace the whole page. If you click the about or contact link, it simply brings you further down the page to the about or contact section. If you then scroll up the page, you'll see the navbar is still there. If you want the navbar visible at all times you need to set it as a fixed navbar :) – Jake Taylor Aug 11 '18 at 15:38

score 0 · Answer 3 · answered Jul 17 '18 at 16:19

Ruben Ruttens code did not work for me, but gave me a rough Idea on 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');
    });
  }
});

Bootstrap: Multiple pages (divs) and navbar

3 Answers3

Option 1

Option 2

Linked