jquery addClass 到多个链接

Question

有什么方法可以将类添加到多个链接？我有两个不同的 div 包含相同的链接集；单击链接应将相同的类应用于另一个 div 集中的“等效”链接。

<style>
.one{margin:70px 0}
.one a{ margin:10px; padding:5px 10px; background-color:green; text-decoration: none; color:white}
.selected{background-color: yellow;}
</style>
<div class="one">
<a href="#first">1</a><a href="#second">2</a><a href="#third">3</a>
</div>

<div class="two">
<a href="#first">1</a><a href="#second">2</a><a href="#third">3</a>
</div>
<script>
$("a.one").click(function() {
    $(this).addClass(".selected").filter(':first').click();
});
</script>

Answer 1

此代码将帮助您...

$("a").addClass(".selected");

Answer 2

LINK

首先你需要找到锚的索引。然后根据该索引在第二个div锚中应用类。

$('.two').children('a').eq($('.one a').index(this)).addClass('selected');

 $('.one').children('a').eq($('.two a').index(this)).addClass('selected');

Answer 3

我会尝试介绍必须一起更改的所有链接的共同点。在此我介绍了一个类来识别它们：

<style>
.one{margin:70px 0}
.one a{ margin:10px; padding:5px 10px; background-color:green; text-decoration: none; color:white}
.selected{background-color: yellow;}
</style>
<div class="one">
<a href="#first" class="1">1</a><a href="#second" class="2">2</a><a href="#third" class="3">3</a>
</div>

<div class="two">
<a href="#first" class="1">1</a><a href="#second" class="2">2</a><a href="#third" class="3">3</a>
</div>
<script>
    $(document).ready(function() {
        $("a.1").click(function() {
            $("a.1").addClass("selected");
            $("a:not(.1)").removeClass("selected");
        });
        $("a.2").click(function () {
            $("a.2").addClass("selected");
            $("a:not(.2)").removeClass("selected");
        });
       $("a.3").click(function () {
            $("a.3").addClass("selected");
            $("a:not(.3)").removeClass("selected");
        });
    });
    </script>

注意：如果您的目标浏览器不支持 css3，您不能依赖 :not 选择器，我应该使用一些“旧式”方法来删除该类。