jquery addClass到多个链接

时间:2013-03-22 04:29:50

标签: jquery hyperlink addclass

有什么方法可以将classClass添加到多个链接?我有两个不同的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>

3 个答案:

答案 0 :(得分:0)

此代码可以帮助您......

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

答案 1 :(得分:0)

LINK

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

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

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

答案 2 :(得分:0)

我会尝试介绍一些必须一起改变的所有链接的共同点。在这里我引入了一个类来识别它们:

<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,你不能依赖:不是选择器,我应该使用一些“旧样式”方法来删除该类。