CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Qvatra
Qvatra

Reputation: 3857

links in bootstrap menu doesn't work

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?

Upvotes: 0

Views: 1268

Answers (1)

John Klakegg
John Klakegg

Reputation: 943

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.

Upvotes: 1

Related Questions