我想使用香草JS根据URL添加活动链接到导航。
我的导航如下:
<div id="navi">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
JS看起来像这样:
function Activelink() {
link = document.getElementById('navi').getElementsByTagName('a');
for(i=0; i<link.length; i++) {
if(document.location.href.indexOf(link[i].href) != -1) {
link[i].className='active';}
}}
window.onload = Activelink;
效果很好,特别是因为即使访问了博客文章,它也会在博客链接中添加“活动”类。唯一的问题是<a href="/">Home</a>
也永久获得了分配的“活动”类。有没有一种方法可以避免这种情况,以便只有在访问主页时主页链接类才是“活动的”?
答案 0 :(得分:1)
您可以使用endsWith
代替indexOf
:
function Activelink() {
link = document.getElementById('navi').getElementsByTagName('a');
for(i=0; i<link.length; i++) {
if(document.location.href.endsWith(link[i].href)) {
link[i].className='active';}
}}
window.onload = Activelink;
答案 1 :(得分:0)
首先,欢迎堆栈溢出!答案在某种程度上取决于您对网站的未来概念,以及导航中是否存在URL。例如,如果您在页脚的/ copyright链接处访问了某种版权页面,但是在导航中却没有,那么应该突出显示什么?首页条目?禁止入内?此外,我假设/ blog和/ contact也可以有子页面?像/ blog /无论什么?
因此,无论将来遇到什么紧急情况,一个简单的解决方案都是反转for循环并在if子句中添加一个中断:(请注意,我将/ blog更改为/ js,因为这是URL的一部分该测试代码片段将在其中运行。)
function activeLink() {
link = document.getElementById('navi').getElementsByTagName('a');
for(i = link.length - 1; i >= 0; i--) {
if(document.location.href.indexOf(link[i].href) != -1) {
link[i].className='active';
break;
}
}}
window.onload = activeLink;
a.active{
background-color:red;
}
<div id="navi">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/js">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
现在,您的for循环将检查window.location.href
是否包含/contact
,如果匹配则中断将跳过循环的所有进一步执行。否则它将搜索/blog
,并且只有前两个执行都不匹配时,它才会选择/
,因为它将始终是URL的一部分。希望这可以帮助!