类似类的多个元素的ToggleClass

我有一个导航链接，其中包含与页面部分相同的类。参见HTML：类似类的多个元素的ToggleClass

<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>

现在我想在点击链接时将类'active'添加到链接和部分。我有这个工作与以下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

来源

2014-07-03 Pepijn Gieles

我不太明白你想要做什么。首先你说过，当你点击链接时，你想添加'主动'类到链接和部分。然后你说你想在点击链接时删除“活动”类。这两种说法相互矛盾。 – Mariatta

不，它们不会抵触，我希望活动链接在我再次单击时处于非活动状态。这是不符合上面的代码。阿德内奥的回答帮助了我。 :) –

你必须排除来自removeClass语句目前点击类的，否则toggleClass总会添加的类别，你总是先删除它。

你也应该删除从className的active当你得到它，否则，你有时得到one active等等，而不仅仅是one。

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

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

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

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

});

FIDDLE

来源

2014-07-03 18:01:08 adeneo

完美！这就是我一直在寻找的。非常聪明！ –

你只需要返工脚本有点..

<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/

来源

2014-07-03 18:03:31

类似类的多个元素的ToggleClass

回答

相关问题