Is there a way to dynamically add an .active class (font-weight:700;) to the active pages navigation menu based on the category in the URL?
The system url is constructed using session and category parameters.
For example, the homepage for logged-in users is located at
And the navigation menu links are structured as follows:
- Cat 1 -
- Cat 2 -
If anyone can guide me on how to extract the category from the URL and apply the .active class accordingly, it would be greatly appreciated. Thank you!
<div id="SbCatMenu">
<dl id="dlCatLvl1" class="clsCatLvl1 clsOffCat1">
<dd class="clsCatTree1 clsCTree1" id="CatImg1"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&SXREF=1">Apparel<span class="clsCatOffCount"> 15</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg2"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&SXREF=2">Events<span class="clsCatOffCount"> 23</span></a></dd>
...
...
</dl>
</div>
I've attempted the following JavaScript code without success:
$
(function(){
//this returns the whole url
var current = window.location.href;
console.log(current)
//this identifies the list you are targeting
$('#dlCatLvl1 dd a').each(function(){
var $this = $(this);
console.log(this)
// if the current path is exactly like this link, make it active
if($this.attr('href') === current){
$this.css('color', 'red');
}
})
});