突出显示活动锚链接

我有两个导航，彼此相邻，他们正在使用锚链接，我想突出显示活动链接，一旦点击。突出显示活动锚链接

我所做的是

$('.navyy li').click(function() { 
    $(this).addClass('highlight').siblings('li').removeClass('highlight'); 
});

和HTML是，如果你点击第一项之一NAV它将

<div class="navyy"> 
<ul id="nav"> 
    <li><a href="#top">Introduction</a></li> 
    <li><a href="#bookmark1">Usability vs Functionality</a></li> 
    <li><a href="#bookmark2">99/100 Google PageSpeed!</a></li> 
</ul> 
<ul id="nav"> 
    <li><a href="#bookmark3">Gravatar Caching!</a></li> 
    <li><a href="#bookmark4">Optimize Images First!</a></li> 
    <li><a href="#bookmark5">Rich Snippets Boost CTR</a></li> 
</ul> 
    </div>

它似乎jQuery是在UL的只有主动突出显示，但是如果您从其他导航中选择另一个项目，则第一个选定项目将保持突出显示。

这是我JSFIDDLE例如

感谢

来源

2014-08-27 Amir

因为他们没有兄弟姐妹和ID是单数。 – epascarello 2014-08-27 17:50:04

@epascarello难题，有没有什么办法通过hashtag检测url，然后突出显示锚链接？ – Amir 2014-08-27 17:52:04

试试这个：

var $navyyLi = $(".navyy li"); 

$navyyLi.click(function() { 
    $navyyLi.removeClass('highlight') 
    $(this).addClass('highlight'); 
});

Check JSFiddle Demo

来源

2014-08-27 17:43:39 Moshtaf

此问题的唯一问题是页面上有多个lis不在导航栏中。最好在里面使用''.navyy li''。 – epascarello 2014-08-27 17:52:25

...每次点击查询DOM“li”。效率不高。 – Jason 2014-08-27 17:58:01

@epascarello和Jason：感谢您的评论，代码已经更新和改进。 – Moshtaf 2014-08-27 18:05:45

元素是兄弟，只有当他们有相同的父，所以你只能删除来自LI元素的高亮类ame UL父母。如果你想删除所有的亮点，不管它们在哪里，你可以先做。唯一的问题是，如果您在添加高亮区时进行动画制作，那么您应该检查它是否已经先突出显示。（fiddle）

$('.navyy li').click(function() { 
    $('.navyy li').removeClass('highlight'); 
    $(this).addClass('highlight'); 
});

来源

2014-08-27 17:49:29

与其他答案类似，但效率更高。 jQuery无需在每次点击时查询DOM。在这种情况下，这些元素被缓存供将来使用。

var naavy = $(".navyy li"); 

naavy.click(function() { 
    naavy.removeClass("highlight"); 
    $(this).addClass('highlight'); 
});

http://jsfiddle.net/hLeQy/89/

如果没有需要支持旧的浏览器，你可以很容易地做到这一点没有jQuery的：

var naavy = document.querySelectorAll(".navyy li"); 
var length = naavy.length; 

for(var i=0; i<length; i++) { 
    naavy[i].addEventListener("click", function() { 
     highlight(this); 
    }); 
} 

function highlight(element) { 
    for(var i=0; i<length; i++) { 
     naavy[i].classList.remove("highlight"); 
    } 

    element.classList.add("highlight"); 
}

http://jsfiddle.net/hLeQy/90/

来源

2014-08-27 17:50:05 Jason

突出显示活动锚链接

回答

相关问题