i would like to use this popular template:

/

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!

i would like to use this popular template:

http://getbootstrap./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!

• javascript
• jquery
• twitter-bootstrap

• 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 Commented Nov 26, 2014 at 1:51
• Hi Jake, yes that's what i want! :) – WeekendCoder Commented Nov 26, 2014 at 1:52

3 Answers 3

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.

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

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