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

Question

我正在尝试将 .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');
    }
     })   
});

Answer 1

尝试匹配而不是比较值：

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

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

编辑：你的 href 值的开头有点，所以用空白替换它们。