Question

我有一个ASP.NET MVC站点（母版页+内容页面）。在母版页上，我有一个菜单。当菜单上选择了某些选项时，它会将您带到相应的控制器并显示页面，这很好，但它也显示一个子菜单。子菜单显示很好，但问题出在菜单中。我不能让菜单的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都可以正常工作。这可能是我申请它的方式。基本上，会发生的是

元素没有得到样式，但元素得到它的一部分（只是背景部分，'颜色'不会改变）。我尝试了几种改变类的方法。我只是希望

在显示子菜单时处于“活动状态”，因此菜单的“连接”和用户了解子菜单的用途。

以下是我尝试更改

类的示例：

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

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

非常感谢任何想法/解决方案。

谢谢！

Answer 1

我认为问题在于你的CSS。尝试在最后一个项目的末尾添加“a”，以便将该样式应用于锚点，而不是li。

ul#menuDeveloper li.menuidcardactive a

而不是

ul#menuDeveloper li.menuidcardactive

似乎正在发生的事情是你的风格被应用于li（因此你的背景被应用）但文字颜色被覆盖

ul#menuDeveloper li a

ASP.NET MVC页面，CSS（？）问题

1 个答案: