添加基于会话URL的活动导航类

时间:2019-05-22 15:02:24

标签: javascript css

我正在尝试将.active类(font-weight:700;)添加到活动页面导航菜单中。

他们的系统网址基于会话和类别。

主页(已登录)-http://mrb-admin.xpeditefulfillment.com/v5fmsnet/OeCart/OeFrame.asp?PmSess1=1339143&SXREF=0&CurPath=1

导航菜单 类别1-http://mrb-admin.xpeditefulfillment.com/v5fmsnet/OeCart/OeFrame.asp?PmSess1=1339143&SXREF=1

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

任何帮助我指出正确方向的方法都可以在URL末尾捕获类别以应用.active类。

谢谢 瑞安

<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>

这是我没有成功尝试过的-

$

(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');
    }
     })   
});

1 个答案:

答案 0 :(得分:0)

尝试匹配而不比较值:

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

因为所有href值都以../OeCart/OeFrame.asp[...]开头,而浏览器中的href每次都以整个URL http://www.your.domain.de/[...]开头。

编辑:href值的开头有点,因此将其替换为空白。