问题描述
我的网站目前有一个非常酷的导航栏,但我希望使其变得更好。 这是我的问题:
有人可以帮我修复我的JS脚本,以便根据当前URL,菜单中的列表项将具有“活动”类,而所有其他具有不同URL的列表项将保持其默认的非活动类?
到目前为止,我将提供我的代码。
的HTML
<li class="nav-home"><a href="index.php">home</a></li>
<li class="dropdown nav-portfolio"><a href="portfolio.php">portfolio</a>
<ul>
<li><a href="#">Photography</a></li>
<li><a href="#">Videos</a></li>
</ul>
</li>
<li class="nav-aboutme"><a href="about-me.php">about me</a></li>
<li class="dropdown nav-socialmedia"><a href="social-media.php">social media</a>
<ul>
<li><a href="#">facebook</a></li>
<li><a href="#">twitter</a></li>
<li><a href="#">instagram</a></li>
<li><a href="#">youtube</a></li>
<li><a href="#">vine</a></li>
<li><a href="#">snapchat</a></li>
<li><a href="#">shots</a></li>
<li><a href="#">google+</a></li>
</ul>
</li>
<li class="nav-contact"><a href="contact.php">contact</a></li>
<li class="dropdown"><a href="#">more</a>
<ul>
<li><a href="#">blog</a></li>
<li><a href="#">faq</a></li>
<li><a href="#">equipment</a></li>
</ul>
</li>
</ul>
JS
if(window.location.href == "http://www.example.com/index.php"){
$('.nav-home').addClass('active');
} else if(window.location.href == "http://www.example.com/portfolio.php"){
$('.nav-portfolio').addClass('active');
} else if(window.location.href == "http://www.example.com/about-me.php"){
$('.nav-aboutme').addClass('active');
} else if(window.location.href == "http://www.example.com/social-media.php"){
$('.nav-socialmedia').addClass('active');
} else if(window.location.href == "http://www.example.com/contact.php"){
$('.nav-contact').addClass('active');
} else {
exit();
}
我已经通过语法检查器运行了JS,它说的都是正确的,但是这段代码并未将类添加到任何列表项中。 总结一下,如果有人可以帮助我修复我的代码,则将“活动”类添加到与当前URL对应的列表项中。 (有关列表项和URL的信息,请参见JS。)任何帮助将不胜感激!
1楼
对于这种情况,您应该使用开关
switch(expression) {
case n:
code block
break;
case n:
code block
break;
default:
default code block
}
详细信息: :
2楼
代码在做什么吗? 您说它没有按照您想要的去做? 到底在做什么 没有? 尝试做
alert(window.location.href)
并查看您实际获得的价值。 你可以尝试做
if(window.location.href === "http://www.example.com/index.php")