類似類的多個元素的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

回答

相關問題