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>项目上）几秒钟
如果直接在地址栏中提供网址，请不要将鼠标拖到该<li>项目

颜色保持不变且未更改

**

任何人都可以帮我解决这个问题?????

Answer 1

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

applying css class to menu item at run time in mvc

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

1 个答案: