jQuery切换样式——.toggleClass()

2019独角兽企业重金招聘Python工程师标准>>>

1、.toggleClass("className"):

给匹配元素集合中的每个元素添加或删除一个或多个样式类,该动作取决于这个样式类是否存在，如果存在（不存在）就删除（添加）一个类。 演示隔行换色：

    <style type="text/css">
    body,
    table,
    td,
    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
    .h {
        background: #f3f3f3;
        color: #000;
    }
    
    .c {
        background: red;
        color: #000;
    }
    </style>

     <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
        <tr>
            <td>慕课jQuery入门11</td>
            <td>慕课jQuery入门22</td>
        </tr>
        <tr>
            <td>慕课jQuery入门12</td>
            <td>慕课jQuery入门23</td>
        </tr>
        <tr>
            <td>慕课jQuery入门</td>
            <td>慕课jQuery入门</td>
        </tr>
        <tr>
            <td>慕课jQuery入门</td>
            <td>慕课jQuery入门</td>
        </tr>
        <tr>
            <td>慕课jQuery入门</td>
            <td>慕课jQuery入门</td>
        </tr>
    </table> 

    js. 
    //给所有的tr元素加一个class="c"的样式
    $("#table tr").toggleClass("c"); 

     //给所有的偶数行（奇数索引行）tr元素切换class="c"的样式
    //所有奇数行的样式保留，偶数行的被删除，false表示删除，true表示保留，忽略不填该参数表示删除，因为“c”样式已经存在
    $("#table tr:odd").toggleClass("c",false);   

转载于:https://my.oschina.net/bob1900/blog/732755