asp.net - 选定的 css 菜单样式更改使用 css

Question

我的 aspx 页面中有一个 css 菜单。我希望选定的菜单具有与悬停菜单相同的样式(更改颜色)。我有悬停和当前选定菜单的 css，并且悬停工作正常。我用谷歌搜索了这个问题，解决方案是在 html 代码的 li 部分设置“class=current”。但我的疑问是我是否必须在每个 li 部分设置“class=current”，或者是否需要 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 更改为，

<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:hover