[英]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. 我正在尝试将.active类(font-weight:700;)添加到活动页面导航菜单中。
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 主页(登录) - 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 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 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. 任何帮助指出我正确的方向来捕获URL末尾的类别以应用.active类将是伟大的。
Thanks Ryan 谢谢瑞恩
<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>
<dd class="clsCatTree1 clsCTree1" id="CatImg3"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&SXREF=3">Giveaways<span class="clsCatOffCount"> 1</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg4"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&SXREF=4">Glassware<span class="clsCatOffCount"> 2</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg5"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&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&SXREF=6">Misc<span class="clsCatOffCount"> 1</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg7"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&SXREF=7">On Premise<span class="clsCatOffCount"> 3</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg8"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&SXREF=8">Print<span class="clsCatOffCount"> 1</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg9"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&SXREF=9">Retail<span class="clsCatOffCount"> 7</span></a></dd>
<dd class="clsCatTree1 clsCTree1" id="CatImg10"><a href="../OeCart/OeFrame.asp?PmSess1=1338988&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');
}
})
});
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/[...]
. 因为您的href值全部以../OeCart/OeFrame.asp[...]
开头,并且您的浏览器中的href每次都会以整个网址启动http://www.your.domain.de/[...]
。
EDIT: There are dots on the beginning of your href-values, so replace them with blank. 编辑:你的href值的开头有点,所以用空格替换它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.