在 jquery mvc 中单击更改菜单颜色无法正常工作

Question

我正在使用 <ul> and <li>s 的关注菜单

<ul class="menu">

                <li>@Html.ActionLink("Home", "Index", new { Controller = "Home" })</li> @*, new { @class = "active" }*@
                <li>@Html.ActionLink("About Us", "About", new { Controller = "Home" })</li>
                <li>@Html.ActionLink("Services", "Services", new { Controller = "Home" })</li>      
                <li>@Html.ActionLink("Post Job", "Create", new { Controller = "JobPosting" })</li>
                <li>@Html.ActionLink("Job Search", "Index", new { Controller = "JobPosting" })</li>
                <li>@Html.ActionLink("Contact Us", "Contact", new { Controller = "Home" })</li>
               </ul>

我正在使用以下 Javascript 方法

function ApplySelectClassOnMenu() {    
var url = window.location.pathname;
var index = url.lastIndexOf('/');
if (index > 0) {
    url = url.substring(index);
}
$('.menu >li').each(function () {        
    var url1 = $(this).children().attr("href");
    index = url1.lastIndexOf('/');
    if (index > 0) {
        url1 = url1.substring(index);
    }
    if (url1 == url) {            
        $(this).children().addClass('active');
    }
    else {
        $(this).children().removeClass('active');
    }
});

}

并在document.ready 上调用它

<script type="text/javascript">
     $(document).ready(function () {
         ApplySelectClassOnMenu();
     });

**现在问题来了，菜单项的颜色确实会改变，但是如果你

• 不要将鼠标停留在菜单项(<li>item) 上几秒钟
• 如果您直接在地址栏中提供 url，请不要将鼠标拖到该 <li> 项目上

颜色保持不变

**

谁能帮我解决这个问题？？？？？？

Answer 1

最终不得不按照@Martin 的建议坚持使用服务器端方法，

applying css class to menu item at run time in mvc