jquery - ASP.NET MVC 页面，CSS(？)问题

Question

我有一个 ASP.NET MVC 站点(母版页 + 内容页)。在主页上，我有一个菜单。当在菜单上选择了一些选项时，它会将您带到相应的 Controller 并显示页面，这很好，但它也会显示一个子菜单。子菜单显示得很好，但问题出在菜单上。我无法让菜单的 CSS 为我工作。

这是菜单代码:

<ul id="menuDeveloper">
    <li><%= Html.ActionLink("Home", "Index", "Home", new { area = (String)null }, null)%></li>
    <li id='idcardselect'><%= Html.ActionLink("IDCard", "Index", "IDCardSelect", new { area = "IDCard_Select" }, null)%></li>
    <li><%= Html.ActionLink("Groups", "Index", "GroupSetup", new { area = "Group_Setup" }, null)%></li>
</ul>

这是它附带的 CSS:

    ul#menuDeveloper{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 93%;
  float: right;
  background: url("images/bg-menu.gif") no-repeat 50% -9px;
  margin-right: 22px;
  margin-top:  6px;
  height: 46px;
  width: 541px;
 }
  ul#menuDeveloper li{
   float: left;
   margin-left: 20px;
   margin-top: 10px;
  }
   ul#menuDeveloper li a{
    color: #6192c1;
    padding: 10px 2px 15px 2px;
    text-decoration: none;
    text-transform: uppercase;
    height: 46px;    
   }
    ul#menuDeveloper li a.active{
     background: #e0e0e0;
     color: #1f67a7;
    }
    ul#menuDeveloper li a:hover{
     background: #e0e0e0;
     color: #1f67a7;
    }

    ul#menuDeveloper li.menuidcardactive
    {
     background: #e0e0e0;
     color: #1f67a7;
    }

除了最后一部分(.menuidcardactive 类)之外，所有 CSS 都可以正常工作。这可能是我应用它的方式。基本上，发生的情况是

元素没有获得样式，但该元素获得了它的一部分(只是背景部分，“颜色”没有改变)。我尝试了几种更改类(class)的方法。我只希望

在显示子菜单时“处于事件状态”，以便菜单“连接”并且用户了解子菜单的用途。

这是我尝试更改类的示例

:

$("#idcardselect").attr('class', 'menuidcardactive');
$("#idcardselect").addClass('menuidcardactive');
$("#idcardselect").removeClass().addClass('menuidcardactive');

所有这些都是在 $(window).load(function(){}); 中完成的索引页面的代码块(点击的菜单项，在本例中为“IDCard”)。

任何想法/解决方案将不胜感激。

谢谢!

Answer 1

我认为问题出在您的 CSS 上。尝试将“a”添加到最后一项的末尾，以便将该样式应用于 anchor 而不是 li。

ul#menuDeveloper li.menuidcardactive a

代替

ul#menuDeveloper li.menuidcardactive

似乎正在发生的事情是您的样式被应用到 li(因此您的背景被应用)但是文本颜色被

覆盖

ul#menuDeveloper li a