个性化阅读
专注于IT技术分析

jQuery toggleClass()

点击下载

本文概述

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

这样, 它会产生切换效果。它还可以帮助你通过使用switch参数指定仅添加或仅删除。

句法:

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

jQuery toggleClass()方法的参数

参数 描述
classname 它是必填参数。它指定一个或多个要添加或删除的类名。如果你使用多个类, 请按空格将其分开。
function (index, currentclass) 它是一个可选参数。它指定你要添加或删除的一个或多个类名。索引:提供元素在集合中的索引位置。 Currentclass:提供所选元素的当前类名称。
switch 它也是一个可选参数。它是一个布尔值, 它指定是添加(true)还是删除(false)类。

jQuery toggleClass()方法的示例

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/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! srcmini02.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>

立即测试

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="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue highlight">www.srcmini02.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>

立即测试

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="https://code.jquery.com/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>

立即测试

赞(0)
未经允许不得转载:srcmini » jQuery toggleClass()

评论 抢沙发

评论前必须登录!