我使用 CSS 和 HTML(ul 等)制作了一个两级菜单。我想要的是要选择的顶层(使用“selected”类)和第二层中对应于当前页面的元素具有类“active”(只是粗体)。
EG 当用户导航到“/maintenance/company.aspx”时,我希望选择“维护”菜单项并将“公司”子菜单项加粗。
第一级选择有效,粗体有效,但我无法显示实际的子菜单(第二级)。
CSS
#menu
{
margin:0;
padding:0;
list-style:none;
position:relative;
background:url(../images/menubg.gif) repeat-x;
height:32px;
text-transform:uppercase;
font-family: Arial, Helvetica, sans-serif;
}
#menu li
{
float:left;
padding:0;
margin:0;
}
#menu a
{
text-decoration:none;
padding:10px 15px;
display:block;
color:#ffffff;
}
#menu li:hover a, a.selected
{
background:#ffffff;
color: #666666 !important;
}
#menu li span
{
float:left;
padding: 5px 0;
position:absolute;
display:none;
left:0;
top:31px;
background:#ffffff;
color: #000;
width: 100%;
}
#menu li:hover span, .selectedSubMenu { display:block; }
#menu li span a { display: inline; padding: 5px 15px; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
#menu li span a:hover {text-decoration: underline;}
.active { font-weight: bold; }
HTML
<ul id="menu">
<li><a href="#" id="contracts">Contracts</a>
<span>
<a href="/contracts/submitcontract.aspx">New Contract</a>
<a href="/contracts/search.aspx">Find Contract</a>
</span>
</li>
<li><a href="#" id="invoicing">Invoices</a>
<span>
<a href="/invoicing/invoicerun.aspx">Invoices Run</a>
<a href="/invoicing/invoicerun.aspx">Invoicing History</a>
</span>
</li>
<li><a href="#" id="maintenance">Maintenance</a>
<span>
<a href="/maintenance/account.aspx">Accounts</a>
<a href="/maintenance/agent/search.aspx">Agents</a>
<a href="/maintenance/company.aspx">Companies</a>
<a href="/maintenance/contact.aspx">Contacts</a>
<a href="/maintenance/networks.aspx">Networks</a>
<a href="/maintenance/plans.aspx">Plans</a>
</span>
</li>
<li><a href="#" id="admin">Control Panel</a>
<span>
<a href="/admin/userlist.aspx">Users</a>
<a href="/admin/systemsettings.aspx">System Settings</a>
</span>
</li>
</ul>
JQUERY
function markActiveLink() {
var path = location.pathname.substring(1);
if (path) {
$('#menu li > a').each(function() {
var $category = $(this).attr('id');
if (path.indexOf($category) > -1) {
$(this).addClass('selected');
--> $(this).siblings('span:first').addClass('selectedSubMenu');
$('#menu li span a[@href="/' + path + '"]').addClass('active');
}
});
}
}
$(document).ready(markActiveLink);
最佳答案
我通过 FireBug 的一些调查弄清楚了它是什么。我需要为我的 CSS 添加一些特殊性。
#menu li:hover span, .selectedSubMenu { display:block; }
成为
#menu li:hover span, #menu li span.selectedSubMenu { display:block; }
我必须添加一些 css 来改变 anchor 的颜色
#menu li span.selectedSubMenu a { color:#666666; }
http://www.htmldog.com/guides/cssadvanced/specificity/帮我解释了一下。
关于jquery - 突出显示当前页面的两级水平菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3481956/