[英]Css click sub menu bold main menu
当我单击子菜单时,我希望主菜单突出显示背景。
我的编码如下:
<div id="dmenubg">
<ul id="nav" class="drop">
<li><a href="index.php">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="aaa.php">AAA</a></li>
<li><a href="#">BBB</a></li>
<li><a href="#">CCC</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
var str=location.href.toLowerCase();
$(".drop li a").each(function() {
//alert(str.indexOf(this.href.toLowerCase()));
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
$(".drop li ul a").each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$(".drop.li.ul.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
})
</script>
Result of my menu:
Home **Service**
**AAA**
BBB
CCC
单击AAA项目时,我要突出显示“服务”和AAA。
我对您的JavaScript做了一些修改。 现在的基本思想是,我们在每个锚点中查找匹配项,然后检查其是否具有有效的父菜单项来匹配。
请注意,如果只想突出显示父项的文本,则需要执行externalNav.find(“> a”)。addClass()。
$(".drop li a").each(function() {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
var outerNav = $(this).parent().parent().parent();
if(outerNav.is("li")) {
/* Use this code to highlight the entire ul contents */
//outerNav.addClass("highlight");
/* Use this code to highlight just the parent li a */
outerNav.find(">a").addClass("highlight");
}
}
});
$(“。drop> li> a”)作为选择器,它将仅突出显示“一级菜单”。 并非.drop li下的所有锚链接。
我希望这能解决您的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.