jQuery修改CSS样式、jQuery修改CSS样式类，简单案例-tab栏切换

秒速五厘米 2023-01-02 11:28 169阅读 0赞

### jQuery修改css样式 ###

参数只写属性名，则是返回属性值

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

参数是属性名，属性值，中间用逗号分隔，则表示设置一组样式。这种方式中属性必须加引号，值如果是数字可以不加引号和单位

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

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性名可以不加引号,属性值为数字时可以不加引号和单位，但是不是数字时，需要加引号；如果是复合属性如backgroundColor需要采取驼峰命名法。

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

### jQuery修改css样式类 ###

添加类：addClass，Classs首字母需要大写

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

删除类：removeClass

$("div").removeClass("surrent");

切换类：toggleClass，如果有这个类则删除这个类，如果没有则添加。

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

##### 案例时刻-tab栏切换 #####

之前用html，css和JavaScript写过这个案例 [点击查看][Link 1]，这次用jQuery

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tab栏切换</title>
        <script src="jquery.js"></script>
        <style>
            *{
         
                margin: 0;
                padding: 0;
            }
            li{
         
                list-style: none;
            }       
            .head li {
         
                float: left;
                width: 100px;
                text-align: center;
            }
            .body div{
         
                display: none;
                width: 200px;
                height: 400px;
            }
            .current {
         
                background-color: red;
                color: white;
            }
            .body :first-child{
         
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="tab">
            <div class="head">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="body">
                <div class="item">这里是商品介绍栏</div>
                <div class="item">这里是规格与保障栏</div>
                <div class="item">这里是售后保障栏</div>
                <div class="item">这里是商品评价栏</div>
                <div class="item">这里是手机社区</div>
            </div>
        </div>
        <script>
            $(function() {
         
                $(".head li").click(function() {
         
                    var index = $(this).index();
                    $(this).addClass("current").siblings().removeClass("current");
                    $(".body .item").eq(index).show().siblings().hide();
                })
            })
            
        </script>
    </body>
    </html>

[Link 1]: https://blog.csdn.net/weixin_42579348/article/details/109803280