如何通过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");