CODEWITHSUNDEEP
jquerycssasp.nettwitter-bootstraptabs
John John
John John

Reputation: 1

how to set active class when user clicks on a nav-tabs

I have the following markup inside my asp.net mvc web application, which display two tabs, and i am 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 i am trying to achieve is to set class="active" when a user clicks on a tab, as currently the tab which the user clicks on , will not be highlighted as active? can anyone adivce ?

Upvotes: 0

Views: 777

Answers (1)

danielrs
danielrs

Reputation: 351

I have no experience with ASP.net, however, I do know it is a server-side framework, am I right? What you are trying to do needs client-side javascript, here's the Codepen snippet: http://codepen.io/anon/pen/JoeMjV

They key part is the 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 to the tab that triggered the click event
        $(this).addClass('nav-active');
    });
});

Best regards.

Upvotes: 1

Related Questions