How to add Css class in Html.ActionLink by JavaScript?

Question

I have a mainmenu view:

    <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>

and the View of submenu in mainview:

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

and a little Javascript to add css class for active link:

 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 = ""; }


}

My javascript is not working?

Answer 1

Add an ID to that link so you can find it:

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

Then select it by ID and add the class...

using pure Javascript:

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

or jQuery if you're using that:

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