0

I'm trying make a navigation menu following the bootsrap API.

Here is what I have:

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="Home" role="tab" data-toggle="tab">Home</a></li>
    <li><a href="Login" role="tab" data-toggle="tab">Login</a></li>
    <li><a href="Prediction" role="tab" data-toggle="tab">Predict</a></li>
</ul>

I want to redirect to different urls by pressing these tabs. The problem is that links doesn't work in menu context and DO work if I just write:

<a href="Home">Home</a>
<a href="Login">Login</a>
<a href="Prediction">Predict</a>

The problems appear when I add role="tab" data-toggle="tab" to a menu element. If I will remove role="tab" data-toggle="tab" then it stops to behave like tabs (no active tab).

How to fix it?

31415926
  • 3,811
  • 7
  • 47
  • 78

1 Answers1

1

If I understand you correctly, you are trying to toogle different div's based on the link you click on. You need to reference the target element using #target in each href=, where target is the id of the element you want to open.

Have a look at this jsfiddle.

If that's not what you are looking for then please be a bit more specific of what you are trying to accomplish.

Update based on comment: just remove data-toogle="tab" from the links and replace href="#home" with href="/home" or whatever path you want to navigate to.

John Klakegg
  • 943
  • 9
  • 19
  • I want to use menu for navigation(to a specific url) and not for displaying different text. – 31415926 Jul 29 '14 at 12:00
  • I did try that already. If I remove data-toogle="tab" it would not work as tabs. I do want it to look like bootstrap tabs that you can click and not just like usual links. – 31415926 Jul 30 '14 at 08:28
  • You would then need to add `class="active"` to the parent `li` element based on which link you clicked. Say you are on `/home` and click the `/login` link, you would then need to remove `class="active"` from `a href="/home"`'s parent `li` element and add it on `a href="/login"`'s parent `li`. See [this](http://snipplr.com/view/41829/nav-with-classactive-based-on-page/) for an example. – John Klakegg Jul 30 '14 at 08:46
  • I did, the problem that if I click on another tab, the same "active" tab remains active without data-toogle="tab" attribute. The only solution I found is to do it by hand in js code: $('#menu1')[0].className = "active"; but it's very ugly – 31415926 Jul 30 '14 at 08:52
  • The typical way of doing this is in php or any other language on the server side, like the example in my previous comment. However, without knowing your setup the only thing I can suggest is to search further. If you want to handle this in javascript you would need to do something like [this](http://stackoverflow.com/a/20060541/536287). – John Klakegg Jul 30 '14 at 09:49