將CSS添加到Ajax.ActionLink

Question

我有一系列Ajax.ActionLink()，它們決定了我的Index頁面上顯示的內容。這很酷，所有，但我想確定哪些是被點擊的「活動」選項卡，通過添加我的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來做到這一點，通過聽他們點擊哪個鏈接，並將活動類添加到該元素。

通過向@ Ajax.ActionLink方法添加new {@class='navigationLink'}參數，爲每個鏈接添加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類將其標記爲鏈接集合中的鏈接。當用戶點擊一個具有導航鏈接類的HTML元素時，它將搜索所有其他導航鏈接並從每個導航鏈接中移除活動類，然後將活動類添加到正在單擊的當前鏈接。