快捷導(dǎo)航

jQuery樣式操作方法整理介紹

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

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

1.操作css方法

jQuery可以使用Css方法來修改簡(jiǎn)單元素樣式;可以操作類,修改多個(gè)樣式。

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

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

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

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

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

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

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

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

2.1添加類

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

2.2移除類

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

2.3切換類

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

3.tab欄切換案例

實(shí)現(xiàn)效果

案例分析

1. 點(diǎn)擊上部的Ii ,當(dāng)前Ii添加current類,其余兄弟移除類。

2. 點(diǎn)擊的同時(shí),得到當(dāng)前l(fā)i的索引號(hào)

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

核心代碼

$(function() {
       // 1.點(diǎn)擊上部的li，當(dāng)前l(fā)i 添加current類，其余兄弟移除類
       $(".tab_list li").click(function() {
       // 鏈?zhǔn)骄幊滩僮?
       $(this).addClass("current").siblings().removeClass("current");
       // 2.點(diǎn)擊的同時(shí)，得到當(dāng)前l(fā)i 的索引號(hào)
       var index = $(this).index();
       // 3.讓下部里面相應(yīng)索引號(hào)的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>商品評(píng)價(jià)（50000）</li>
                <li>手機(jī)社區(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">商品評(píng)價(jià)（50000）模塊內(nèi)容</div>
            <div class="item">手機(jī)社區(qū)模塊內(nèi)容</div>
        </div>
</div>