我有一个css菜单在我的aspx页面。我希望选定的菜单有相同的风格作为悬停菜单(改变颜色)。我有两个悬停和当前选择菜单的CSS,悬停工作正常。我在谷歌上搜索过这个问题,解决方案是在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;
}
山姆·沃伦-添加了jsfiddle -http://jsfiddle.net/ejLTy/
实际上,我在所有四个页面(DataLog.aspx、EmployeeDetails.aspx、EquipmentDetail.aspx和ScannerDetail. aspx)的主页中都有这个菜单栏。
3条答案
按热度按时间qc6wkl3g1#
不需要JavaScript。只需将li更改为,
通过将li类更改为当前类,对所有页使用相同的例程。
对于悬停,请使用css中名为
您的部门:悬停
irtuqstp2#
检查它的例子,你更新的CSS我刚刚添加了**(当前)id在你的li**和你想要的地方,选定的链接添加当前的id在该特定li。
http://jsfiddle.net/ejLTy/2/
mcvgt66p3#
只要把
class="current"
放在第一个li
中,你就会在每个链接上得到选择。