javascript - 如何通过 JavaScript 在 Html.ActionLink 中添加 Css 类？

Question

我有一个主菜单视图：

    <div class="submenu">
    <ul>
        @foreach (var p in Model)
        {
            <li>
                <div class="manu_bg">
                    @Html.ActionLink(p.Name, "ListProductByGroupID", "Product", new { GroupID = p.GroupCategoryID, GroupName = p.Name }, null)
                </div>
                @{Html.RenderAction("ListCateByGroupID", "Category", new { GroupID = p.GroupCategoryID });
                }
            </li>
        }
    </ul>
</div>

和主视图中的子菜单视图：

 @foreach (var i in Model)
    {
        <li>
                @Html.ActionLink(i.Name, "ListProductByCateID", "Product", new { CateID = i.CategoryID, CateName = i.Name }, new { id="link"})  
        </li>    
    }

和一点 Javascript 来为活动链接添加 css 类：

 window.onload = ActiveLink;
function ActiveLink() {
    var link = document.getElementById("link");
        link.onclick = showActive;
}

function showActive() {
    var selectedlink = this.text;
    var link = document.getElementById("link");
        if (link.text == selectedlink) {
            link.className = " active";
        }
        else { link.className = ""; }


}

我的 javascript 不工作？

Answer 1

向该链接添加一个 ID，以便您可以找到它：

@Html.ActionLink(i.Name, "ListProductByCateID", "Product", new { CateID = i.CategoryID, CateName = i.Name }, new { id = "ListByCatLink" })</div>

然后按 ID 选择它并添加类...

使用纯 Javascript：

var link = document.getElementById("ListByCatLink");
link.className = link.className + " active";

或 jQuery，如果你正在使用它：

$("#ListByCatLink").addClass("active");