Add Active Navigation Class Based on Session URL

I am trying to add an .active class (color: red;) to the active pages navigation menu.

They system url is based on session and category.

Homepage (logged in) - http://mrb-admin.xpeditefulfillment.com/v5fmsnet/OeCart/OeFrame.asp?PmSess1=1339143&SXREF=0&CurPath=1

Navigation menu Cat 1 - http://mrb-admin.xpeditefulfillment.com/v5fmsnet/OeCart/OeFrame.asp?PmSess1=1339143&SXREF=1

Cat 2 - http://mrb-admin.xpeditefulfillment.com/v5fmsnet/OeCart/OeFrame.asp?PmSess1=1339143&SXREF=2

Any help pointing me in the right direction to capture the category at the end of the URL to apply the .active class would be great.

HTML - generated by server for Nav list


<div id="SbCatMenu">
<dl id="dlCatLvl1" class="clsCatLvl1 clsOffCat1">
<dd class="clsCatTree1 clsCTree1" id="CatImg1"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&amp;SXREF=1">Apparel<span class="clsCatOffCount"> 15</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg2"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&amp;SXREF=2">Events<span class="clsCatOffCount"> 23</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg3"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&amp;SXREF=3">Giveaways<span class="clsCatOffCount"> 1</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg4"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&amp;SXREF=4">Glassware<span class="clsCatOffCount"> 2</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg5"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&amp;SXREF=5">In Store Tastings<span class="clsCatOffCount"> 1</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg6"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&amp;SXREF=6">Misc<span class="clsCatOffCount"> 1</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg7"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&amp;SXREF=7">On Premise<span class="clsCatOffCount"> 3</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg8"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&amp;SXREF=8">Print<span class="clsCatOffCount"> 1</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg9"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&amp;SXREF=9">Retail<span class="clsCatOffCount"> 7</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg10"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&amp;SXREF=10">Retail/ Events<span class="clsCatOffCount"> 1</span></a></dd>
</dl>

</div>

This is what i have tried 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 matches 'this' link, make it active
if(current.match($this.attr('href').replace('..', '') !== null)){
  $this.css('color', 'red');
}
     })   
});

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.