When i clicked sub menu, i would like main menu highlight background.
My coding as the following:
<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
When click on AAA Item, I want to highlight Services and AAA.
I modified your javascript a bit. The basic idea is now we look through every anchor for a match then check to see if it has a valid menu parent to match.
Note that if you want just the text for the parent to be highlighted then you need to do outerNav.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") as Selector Than it will hightlight only First Level of Menu. Not all anchor link under .drop li.
I hope this will solve your issue
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.