jquery - how to set active class when user clicks on a nav-tabs -
i have following markup inside asp.net mvc web application, display 2 tabs, , using bootstrap 2.0.2:-
<ul class="nav nav-tabs" id="mytab"> @if(model.hasracks) { <li> @ajax.actionlink("show related racks", "customerrack","customer", new {customerid = model.accountdefinition.org_id}, new ajaxoptions { insertionmode = insertionmode.replace, updatetargetid = "detail" , loadingelementid = "progress", onsuccess="detailsuccess" } ) </li> } @if(model.hasserver) { <li >@ajax.actionlink("show related servers", "customerserver","customer", new {customerid = model.accountdefinition.org_id}, new ajaxoptions { insertionmode = insertionmode.replace, updatetargetid = "detail" , loadingelementid = "progress", onsuccess="detailsuccess", } )</li>}</ul>
what trying achieve set class="active"
when user clicks on tab, tab user clicks on , not highlighted active? can adivce ?
i have no experience asp.net, however, know server-side framework, right? trying needs client-side javascript, here's codepen snippet: http://codepen.io/anon/pen/joemjv
they key part java script extract:
// using jquery javascript library $(document).ready(function() { $('ul.nav li').click(function() { // remove previous clicked tab class $('ul.nav li').removeclass('nav-active'); // add class tab triggered click event $(this).addclass('nav-active'); }); });
best regards.
Comments
Post a Comment