Reputation: 1
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
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