快捷導(dǎo)航

jQuery樣式操作方法整理介紹

更新時間：2022年10月24日 09:36:08 作者：YinJie…

這篇文章主要介紹了jQuery樣式操作方法，并通過實際案例更淺顯的理解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧

1.操作css方法

jQuery可以使用Css方法來修改簡單元素樣式;可以操作類,修改多個樣式。

參數(shù)只寫屬性名，則是返回屬性值

$(this).css("color");

參數(shù)是屬性名,屬性值,逗號分隔,是設(shè)置一組樣式,屬性必須加引號,值如果是數(shù)字可以不用跟單位和引號

$(this,css("color","red");

參數(shù)可以是對象形式,方便設(shè)置多組樣式。屬性名和屬性值用冒號隔開,屬性可以懷加引號,

$(this).css({"color":"white","font-size":"20px"});

2.設(shè)置樣式類方法

作用等同于以前的classList ,可以操作類樣式,注意操作類里面的參數(shù)不要加點。

2.1添加類

$("div").addClass("current');

2.2移除類

$("div").removeClass("current');

2.3切換類

$("div").toggleClass("current");

3.tab欄切換案例

實現(xiàn)效果

案例分析

1. 點擊上部的Ii ,當前Ii添加current類,其余兄弟移除類。

2. 點擊的同時,得到當前l(fā)i的索引號

3. 讓下部里面相應(yīng)索引號的item顯示,其余的item隱藏

核心代碼

$(function() {
       // 1.點擊上部的li，當前l(fā)i 添加current類，其余兄弟移除類
       $(".tab_list li").click(function() {
       // 鏈式編程操作
       $(this).addClass("current").siblings().removeClass("current");
       // 2.點擊的同時，得到當前l(fā)i 的索引號
       var index = $(this).index();
       // 3.讓下部里面相應(yīng)索引號的item顯示，其余的item隱藏
       $(".tab_con .item").eq(index).show().siblings().hide();
    });
})

html結(jié)構(gòu)

<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介紹</li>
                <li>規(guī)格與包裝</li>
                <li>售后保障</li>
                <li>商品評價（50000）</li>
                <li>手機社區(qū)</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">商品介紹模塊內(nèi)容</div>
            <div class="item">規(guī)格與包裝模塊內(nèi)容</div>
            <div class="item">售后保障模塊內(nèi)容</div>
            <div class="item">商品評價（50000）模塊內(nèi)容</div>
            <div class="item">手機社區(qū)模塊內(nèi)容</div>
        </div>
</div>