CODEWITHSUNDEEP
javascriptcss
Ryan
Ryan

Reputation: 27

Add Active Navigation Class Based on Session URL

I am trying to add an .active class (font-weight:700;) 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.

Thanks Ryan

<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 is exactly like this link, make it active

    if($this.attr('href') === current){        
       $this.css('color', 'red');
    }
     })   
});

Upvotes: 0

Views: 153

Answers (1)

Marcel Wagner
Marcel Wagner

Reputation: 141

Try to match not compare the values:

if(current.match($this.attr('href').replace('..', '') !== null){     
  $this.css('color', 'red');
}

Because your href values all starts with ../OeCart/OeFrame.asp[...]and your href in you browser starts every time with the whole url http://www.your.domain.de/[...].

EDIT: There are dots on the beginning of your href-values, so replace them with blank.

Upvotes: 0

Related Questions