将css添加到Ajax.ActionLink

Question

我有一系列Ajax.ActionLink()来确定Index页面上显示的内容。这很酷，但是我想确定哪一个是＆＃34;活跃的＆＃34;通过为活动标签添加我的css而单击的选项卡。这就是现在的样子：

这是我的代码：

@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" })
}

我试图添加new {@class="active"} to the end of each if`，但它显示所有这些都是有效的。我怎样才能一次只完成一个活动？

Answer 1

您可以通过Javascript听取他们点击的链接并将活动类添加到该元素来执行此操作。

通过将new {@class='navigationLink'}参数添加到@ Ajax.ActionLink方法，为每个链接添加HTML属性。

使用JQuery，您可以在$ .ready函数中添加以下内容。

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

这里我使用的是一个navigationLink类，将其标记为链接集合中的链接。当用户单击具有navigationLink类的HTML元素时，它将搜索所有其他navigationLink并从每个中删除活动类，然后将活动类添加到要单击的当前链接。