I am having lengthy structure of bootstrap theme classes.
This is menu i am designing.
Have this code for this menu bar design in bootstrap-
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</a><a class="brand" href="#">My Menu</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="/Home/Dashboard"><i class="icon-home icon-white"></i>Dashboard</a></li>
<li ><a href="#" id="taskMainLink">Task</a></li>
<li><a href="#" id="contactMainLink">Contact</a></li>
<li><a href="#" id="appointmentMainLink">Appointment</a></li>
<li><a href="#" id="projectMainLink">Project</a></li>
<li><a href="#" id="salesMainLink">Sales</a></li>
</ul>
Now Issue
I want each tab to be active on mouseclick and other tabs should be in original state. Current active class is dashboard by default i did.
Structure i am following for each time i click on any tab-
$('.navbar.navbar-fixed-top.navbar-inverse>.container-fluid>.nav-collapse>.nav').click(function(){
$(this).find('li').removeClass('active');
$(this).addClass('active');
});
Am i going right class into class? Please suggest me right solution if i am wrong here.