jQuery toggleClass()

使用jQuery toggleCLass()方法可从所选元素中添加或删除一个或多个类。此方法在添加和删除一个或多个类名之间切换。它检查每个元素是否有指定的类名。如果已经设置了类名，则将其删除，而如果缺少类名，则将其添加。

通过这种方式，它将创建切换效果，还可以方便您指定仅使用switch参数添加还是删除。

语法:

$(selector).toggleClass(classname,function(index,currentclass),switch)

jQuery toggleClass()方法的参数

参数	说明
classname	这是强制性参数。它指定一个或多个要添加或删除的类名。如果您使用多个类，请按空格将其分隔。
function(index,currentclass),switch)	这是一个可选参数。它指定要添加或删除的一个或多个类名。 index:它提供元素在集合中的索引位置。 currentclass:它提供所选元素的当前类别名称。
switch	它也是一个可选参数。这是一个布尔值，它指定是应添加类(true)还是应删除类(false)。

jQuery toggleClass()方法的示例

我们以一个示例来演示jQuery toggleClass()方法的效果。

<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggleClass("main");
    });
});
</script>
<style>
.main {
    font-size: 150%;
    color: red;
}
</style>
</head>
<body>
<button>Toggle class "main" for p elements</button>
<p>Hello! lidihuo.com</p>
<p>This is popular tutorial website.</p>
<p><b>Note:</b> Click repeatedly on the button to see the toggle effect.</p>
</body>
</html>

输出:

Hello! lidihuo.com

This is popular tutorial website.

Note: Click repeatedly on the button to see the toggle effect.

jQuery toggleClass()示例2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
  }
  .blue {
    color: black;
  }
  .highlight {
    background: pink;
  }
  </style>
  <script src="/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue highlight">www.lidihuo.com</p>
<p class="blue">Java Tutorial</p>
<p class="blue">SQL Tutorial</p>
<p class="blue">Android Tutorial</p>
<p class="blue">HTML Tutorial</p>
<p class="blue">etc.</p>
<script>
$("p").click(function() {
$( this ).toggleClass( "highlight");
});
</script>
</body>
</html>

输出:

www.lidihuo.com

Java Tutorial

SQL Tutorial

Android Tutorial

HTML Tutorial

etc.

jQuery toggleClass()示例3

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <style>
  .wrap > div {
    float: left;
    width: 100px;
    margin: 1em 1em 0 0;
    padding=left: 3px;
    border: 1px solid #abc;
  }
  div.a {
    background-color: aqua;
  }
  div.b {
    background-color: burlywood;
  }
  div.c {
    background-color: cornsilk;
  }
  </style>
  <script src="/jquery-1.10.2.js"></script>
</head>
<body>
<div class="buttons">
  <button>toggle</button>
  <button class="a">toggle a</button>
  <button class="a b">toggle a b</button>
  <button class="a b c">toggle a b c</button>
  <a href="#">Reset</a>
</div>
<div class="wrap">
  <div></div>
  <div class="b"></div>
  <div class="a b"></div>
  <div class="a c"></div>
</div>
<script>
var cls = [ "", "a", "a b", "a b c" ];
var divs = $("div.wrap").children();
var appendClass = function() {
  divs.append(function() {
    return "<div>" + ( this.className || "none") + "</div>";
  });
};
appendClass();
$("button").on( "click", function() {
  var tc = this.className || undefined;
  divs.toggleClass( tc );
  appendClass();
});
$("a").on( "click", function( event ) {
  event.preventDefault();
  divs.empty().each(function( i ) {
    this.className = cls[ i ];
  });
  appendClass();
});
</script>
</body>
</html>

输出:

Reset

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< jQuery hasClass() jQuery width() >>

昵称：邮箱：