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

最新推荐文章于 2024-08-29 14:21:21 发布

我是Dreamer啊

最新推荐文章于 2024-08-29 14:21:21 发布

阅读量7.1k

点赞数 2

文章标签： css html javascript js jquery

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/112251335

版权

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写过这个案例点击查看，这次用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>

我是Dreamer啊

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery修改CSS样式、jQuery修改CSS样式类，简单案例-tab栏切换

jQuery修改css样式参数只写属性名，则是返回属性值$(this).css("color");参数是属性名，属性值，中间用逗号分隔，则表示设置一组样式。这种方式中属性必须加引号，值如果是数字可以不加引号和单位$(this).css("color","red");参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性名可以不加引号,属性值为数字时可以不加引号和单位，但是不是数字时，需要加引号；如果是复合属性如backgroundColor需要采取驼峰命名法。$(this).c
复制链接

扫一扫