Question

我有一个带链接的导航，其中包含与页面部分相同的类。见HTML：

<a href="#" class="one">Link 1</a>
<a href="#" class="two">Link 2</a>
<a href="#" class="three">Link 3</a>

<section class="one">Section 1</section>
<section class="two">Section 2</section>
<section class="three">Section 3</section>

现在我想添加课程＆＃39; active＆＃39;单击链接时链接和部分。我已经使用了以下jQuery：

$('a').click(function(){

    $('.active').removeClass('active');

    var activeClass = this.className;

    $('.' + activeClass).toggleClass('active');

});

唯一的问题是课程没有切换。当我点击活动链接时，我希望链接和部分的活动状态消失。我用if语句用这种方式尝试了它：

if($(this).hasClass('active')){
    var activeClass = this.className;
    $('.' + activeClass).removeClass('active');
}

我想我在这里错过了一些更深层次的知识，任何人都可以帮助我吗？提前谢谢。

fiddle

Answer 1

您必须从removeClass语句中排除当前点击的类，否则toggleClass将始终添加该类，因为您始终先将其删除。

您还应该从active中删除className，否则您有时会one active等而不只是one。< / p>

$('a').click(function(){

    var activeClass = '.' + $.trim(this.className.replace('active',''));

    $('.active').not(activeClass).removeClass('active');

    $(activeClass).toggleClass('active');

});

FIDDLE

Answer 2

你只需稍微修改一下脚本..

<style>
a.active{

    color: red


}

section{

    height: 200px;
    width: 100%;
    border: 1px solid black;
    margin: 10px 0 10px 0;
}

section.active{

    border-color: red!important;
}


</style>


<a href="#" class="one active">Link 1</a>
<a href="#" class="two">Link 2</a>
<a href="#" class="three">Link 3</a>

<section class="one active">Section 1</section>
<section class="two">Section 2</section>
<section class="three">Section 3</section>






<script>
    $(document).ready(function(){ 

        $('a').on('click', function(){

        //remove all active
        $('.active').removeClass('active');

       //get the class of this link
        var activeClass = $(this).attr('class');

        $('.' + activeClass).addClass('active');

    });//end a.bind

});//end doc.ready

<script>

http://jsfiddle.net/7Q4ph/10/

在具有相似类的多个元素上进行ToggleClass

2 个答案: