所以我的标题中目前有三个无序列表。这是一个使用 anchor 进行导航的单页网站。我需要一个“事件”类来在这三个无序列表之间单击的任何 anchor 之间进行切换。我对 jQuery 和一般编程还比较陌生,但页面的基本结构概述如下。
<div id="header">
<div id="brands-nav">
<h3>Brands:</h3>
<ul class="navitems">
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchore</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
</ul>
</div>
<div id="mediums-nav">
<h3>Mediums:</h3>
<ul class="navitems">
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
</ul>
</div>
</div>
<div id="about-nav">
<h3>About:</h3>
<ul class="navitems">
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Anchor</a></li>
</ul>
</div>
因此,我试图弄清楚如何向任何被单击的类添加“事件”类,以及如何从任何表兄弟中删除事件类。
如果所有元素都包含在同一个父元素中,并且具有类似这样的内容,我了解执行此操作的基本方法...
$(document).ready(function(){
$("#mediums-nav a").click(function(){
$(this).toggleClass("active");
$(this).siblings("a").removeClass("active");
});
});
那么我该如何将其扩展到它的所有表兄弟呢?
最佳答案
试试这个:
var allAnchors = $('.navitems a').click(function(){
allAnchors.removeClass('active');
$(this).addClass('active');
});
关于javascript - 在表兄弟之间切换 "active"类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2586913/