Highlight the Selected Menu Item with one href ="/"
I am seeking help in resolve the following problem.
I have created a menu and use JQuery to highlight the selected menu item (WordPress site). But one of the href used has to be "/" for home page. When selecting any other menu item the item for the home page is always highlighted.
The following are the codes:
HTML
<style>
.active {
color: red;
font-weight:600;
}
</style>
<div id="custom-menu" class="custom-menu col-full" style="border:0px solid red;">
<ul>
<li><a id="main" class="btn" href="/">Home Page</a></li>
<li><a class="btn" href="/perform/">Perform</a></li>
<li><a class="btn" href="/museum/">Museum</a></li>
<li><a class="btn" href="/hangout/">Hangout</a></li>
<li><a class="btn" href="/markets/">Markets</a></li>
<li><a class="btn" href="/my-events/">My Events</a></li>
<li><a class="btn" href="/events/list/">Search</a></li>
</ul>
</div>
jQuery Code
//User jQuery instead of "$" in WordPress to avoid code conflict
jQuery(document).ready(function(){
jQuery(".custom-menu a").each(function() {
//console.log(jQuery(this).attr('href'));
if ((window.location.pathname.indexOf(jQuery(this).attr('href'))) > -1) {
jQuery(this).addClass('active');
}
});
});
I would be grateful if anyone could help me resolve this quickly!