Bahman Bahman - 2 months ago 11x
jQuery Question

On bootstrap navbar, dropdown tab works properly, but prevents other main menu tab links work

I saw many similar questions, and none of the answers worked for me.
My bootstrap navbar was working fine, until I added submenu for one of the tabs, and set it as a dropdown list. But after this, the other tabs on the main menu stopped working. Here is part of my html head:

<script type="text/javascript" src=" "></script>
<script type="text/javascript" src="app.js"></script>
<script src="//"></script>
<script src="//"></script>
<link rel="stylesheet" type="text/css" href="//">

and this is my navbar:

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="index">Home</a></li>
<li><a href="resume" data-toggle="tab">Resume</a></li>
<li class="dropdown">
<a href="java" class="dropdown-toggle" data-toggle="dropdown">Portfolio
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="secondLayer"><a class="font" href="java">Java</a></li>
<li class="secondLayer"><a href="cSharp">C-sharp</a></li>
<li class="secondLayer"><a href="uml">UML</a></li>
<li><a href="contactMe" data-toggle="tab">Contact Me</a></li>
<li><a href="aboutMe" data-toggle="tab">About Me</a></li>

Could anybody please help me on this?


If you just want the tabs to act like links, just remove data-toggle="tab" from everything. Bootstrap has some JS plugged in so that your tabs activate and are pretty for usual navigation, but if you just want them to be links and only want the CSS, there's no need to have that functionality attached.

Here's a fiddle.