jQuery onclick toggle类名

时间:2013-03-26 01:50:00

标签: jquery

使用jQuery,我如何在点击进入时将类切换为类:

<a class="switch" href="#">Switch</a>
<div class="classA"></div>


$('.switch').on('click', function(e){
    $('.classA').removeClass('classA').addClass('classB');
    e.preventDefault();
};

如何切换课程,而不是像我在这里一样更换课程?

3 个答案:

答案 0 :(得分:59)

jQuery有一个toggleClass函数:

<button class="switch">Click me</button>

<div class="text-block collapsed pressed">some text</div>

<script>    
    $('.switch').on('click', function(e) {
      $('.text-block').toggleClass("collapsed pressed"); //you can list several class names 
      e.preventDefault();
    });
</script>

答案 1 :(得分:21)

you can use toggleClass()切换课程非常方便。

情况下:1

<div id='mydiv' class="class1"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class2"></div>

情况下:2

<div id='mydiv' class="class2"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class1"></div>

情况下:3

<div id='mydiv' class="class1 class2 class3"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class3"></div>

答案 2 :(得分:0)

甚至可以使其依赖于另一个属性更改。像这样:

$('.classA').toggleClass('classB', $('input').prop('disabled'));

在这种情况下,每次输入classB时都会添加disabled