Question

我的aspx页面中有一个css菜单。我希望所选菜单与悬停菜单具有相同的样式（更改颜色）。我有hss和当前所选菜单的css，并且悬停工作正常。我已经google了这个问题，解决方法是在html代码的li部分设置“class = current”。但我怀疑的是我是否必须设置“class = current”每个li部分或者是否需要javascript来报告从菜单中选择哪一个。我是css的新手。请帮帮我..

 <div id="tabsJ">
   <ul class="menu">
   <!-- CSS Tabs -->
     <li><a href="DataLog.aspx"><span>Reports</span></a></li>
     <li><a href="EmployeeDetails.aspx"><span>Employee</span></a></li>
     <li><a href="EquipmentDetail.aspx"><span>Equipment</span></a></li>
     <li><a href="ScannerDetail.aspx"><span>Scanner</span></a></li>
   </ul>
 </div>

我用过这个css

#tabsJ {
  float:left;
  width:100%;
  background:#F4F4F4;
  font-size:93%;
  line-height:normal;
      border-bottom:1px solid #24618E;
  }
#tabsJ ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
  }
#tabsJ li {
  display:inline;
  margin:0;
  padding:0;
  }
#tabsJ a {
  float:left;
  background: url("../images/tableftJ.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 5px;
  text-decoration:none;
  }
#tabsJ a span {
  float:left;
  display:block;
  background:url("../images/tabrightJ.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#24618E;
  }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
  color:#FFF;
  }
#tabsJ a:hover {
  background-position:0% -42px;
  }
#tabsJ a:hover span {
  background-position:100% -42px;
  }

    #tabsJ #current a {
            background-position:0% -42px;
    }
    #tabsJ #current a span {
            background-position:100% -42px;
            color:#FFF;
    }

Sam Warren - 添加了jsfiddle - http://jsfiddle.net/ejLTy/

实际上我在所有四个页面的母版页中都有这个菜单栏，DataLog.aspx，EmployeeDetails.aspx，EquipmentDetail.aspx和ScannerDetail.aspx。

Answer 1

不需要JavaScript。只需改变li as，

<li class="current"><a href="DataLog.aspx"><span>Reports</span></a></li>
<li><a href="EmployeeDetails.aspx"><span>Employee</span></a></li>
<li><a href="EquipmentDetail.aspx"><span>Equipment</span></a></li>
<li><a href="ScannerDetail.aspx"><span>Scanner</span></a></li>

用于页面DataLog.aspx。通过将li类更改为当前页面，对所有页面使用相同的例程。

对于悬停，请使用css中的伪元素属性

your_division：悬停

Answer 2

嘿，只要把class =“current”放在第一个li中。您将在每个链接上获得选择。并且转到以下链接，您将获得不同类型的菜单，您也可以根据您的要求自定义菜单。：

http://www.cssmenumaker.com/

Answer 3

检查更新后的CSS示例我刚刚在 li 中添加了（当前） ID 并且您希望所选链接的位置添加该特定li中的当前ID。

http://jsfiddle.net/ejLTy/2/

使用css选择css菜单样式更改

3 个答案: