[英]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.