CODEWITHSUNDEEP
htmlcssajax
PiousVenom
PiousVenom

Reputation: 6908

Add css to Ajax.ActionLink

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?

Upvotes: 1

Views: 1045

Answers (1)

evasilevsky
evasilevsky

Reputation: 175

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.

Upvotes: 2

Related Questions