Add css to Ajax.ActionLink

Question

I've got a series of Ajax.ActionLink() that determine what is displayed on my Index page. This is cool and all, but I'd like to determine which one of them is the "active" tab that was clicked by adding my css for active tabs. Here's what it looks like now:

enter image description here

Here's the code that I have:

@if (SecurityHelper.CheckForSecurityRight(SecurityRight.Report_FundrasingSummaryReport)) {
    @Ajax.ActionLink("Test1", "LoadReportConfiguration", new {ReportID = 5},new AjaxOptions {InsertionMode = InsertionMode.Replace, UpdateTargetId = "ReportConfiguration"})
}


@if (SecurityHelper.CheckForSecurityRight(SecurityRight.Report_CampaignGivingSummary)) {
    @Ajax.ActionLink("Test12", "LoadReportConfiguration", new { ReportID = 8 }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "ReportConfiguration" })
}
@if (SecurityHelper.CheckForSecurityRight(SecurityRight.Report_SolicitorAction)) {
    @Ajax.ActionLink("Test13", "LoadReportConfiguration", new { ReportID = 9 }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "ReportConfiguration" })
}

@if (SecurityHelper.CheckForSecurityRight(SecurityRight.Report_PortfolioManagement)) {
    @Ajax.ActionLink("Test14", "LoadReportConfiguration", new { ReportID = 10 }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "ReportConfiguration" })
}

I've tried to add new {@class="active"} to the end of eachif`, but it showed all of them as active. How can I accomplish only one active at a time?

evasilevsky · Accepted Answer · 2014-03-13 23:28:51Z

You can do this through Javascript by listening to which link they clicked on and adding the active class to that element.

Add an HTML attribute to each of your links by adding the new {@class='navigationLink'} parameter to the @Ajax.ActionLink method.

Using JQuery, you can add the following within a $.ready function.

$('.navigationLink').click(function(){
    $('.navigationLink').removeClass('active');  //Remove active class from all other links. 
    $(this).addClass('active');  //Add active class to current link. 
});

Here I am using a navigationLink class to mark it as a link in the collection of links. When the user clicks on an HTML element that has a class of navigationLink, it will search for all of the other navigationLinks and remove the active class from each, then add the active class to the current link being clicked on.

Collectives™ on Stack Overflow

Add css to Ajax.ActionLink

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related