0

我正在使用以下菜单<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>如果您直接在地址栏中提供 url，请不要将鼠标拖动到该项目

颜色保持不变，没有改变

**

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

4

1 回答 1

0

In the end had to stick with server side method as @Martin suggested,

applying css class to menu item at run time in mvc

于 2013-06-25T11:44:36.557 回答