jQuery样式操作/案例：Tab栏切换

最新推荐文章于 2022-10-02 14:55:22 发布

httpkaidi

最新推荐文章于 2022-10-02 14:55:22 发布

阅读量250

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/httpkaidi/article/details/121621155

版权

jQuery 样式操作类管理 DOM操作 Tab切换

关键词由CSDN通过智能技术生成

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery样式操作
jQuery可以使用css修改简单样式，也可以使用类修改多个样式

修改简单样式：

参数只写属性名，则是返回属性值
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号，如果是复合属性则必须采取驼峰命名法，如果值不是数字，则必须加引号

 $(function(){
          //1.参数只写属性名，则是返回属性值
          console.log($("div").css("width"));//打印 200px
         //2.参数是属性名，属性值，逗号分隔，是设置一组样式，
         //属性必须加引号，值如果是数字可以不用跟单位和引号
          $("div").css("width","300px");//宽度改为了300px
          //3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，
          //属性可以不加引号，如果是复合属性则必须采取驼峰命名法，如果值不是数字，则必须加引号
          $("div").css({width:400,backgroundColor:'blue'});
        })

使用类修改多个样式：
（与原生js 的className不同，不会覆盖原先的类名，只是针对于指定的类进行操作）

添加类：注意里面的类名不要加点（相当于追加类名，不会影响以前的类名）
$("div").addClass("new");
删除类
$(this).removeClass("new")
切换类如果有这个类，就去掉，如果没有，就加上
$(this).toggleClass("new");

         //1.添加类
          $("div").click(function(){
            $(this).addClass("new");
          })
          //2.删除类
          $("div").click(function(){
            $(this).removeClass("new");
          })
          //3.切换类  如果有这个类，就去掉，如果没有，就加上
          $("div").click(function(){
            $(this).toggleClass("new");

案例：Tab栏切换

1.点击上部的li，当前li添加current类，其余兄弟移除类
2.点击的同时，得到当前li的索引号
3.让下部里面相应索引号的item显示，其余的item隐藏

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .tab {
            position: relative;
            width: 601px;
            margin: 40px auto;
        }
        
        li {
            /* text-align: center; */
            list-style-type: none;
        }
        
        .tab_list {
            /* float: left; */
            height: 39px;
            line-height: 39px;
            /* padding-right: 20px; */
            text-align: center;
            cursor: pointer;
            background: rgb(245, 240, 240);
            border: 1px solid rgb(160, 151, 151);
        }
        
        .tab_list li {
            /* display: inline-block; */
            float: left;
            /* padding-right: 20px; */
            padding: 0 20px;
        }
        
        .tab_list .current {
            background-color: red;
            color: #fff;
        }
        
        .tab .tab_con {
            position: absolute;
            top: 39px;
            display: block;
        }
        
        .item {
            display: none;
        }
    </style>
    </head>
    <script src="jquery.min.js"></script>

    <body>
        <!--当鼠标点击上面相应的选项卡（tab) ，下面的内容跟着变化-->
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li>商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价 (50000)</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block">商品介绍模块内容</div>
                <div class="item">规格与保证模块内容</div>
                <div class="item">售后保障模块内容</div>
                <div class="item">商品评价模块内容</div>
                <div class="item">手机社区模块内容</div>
            </div>
        </div>
        <script>
            $(function() {
                //1.点击上部的li，当前li添加current类，其余兄弟移除类
                $(".tab_list li").click(function() {
                    //链式编程操作
                    $(this).addClass("current").siblings().removeClass("current");
                    //2.点击的同时，得到当前li的索引号
                    var index = $(this).index();
                    console.log(index);
                    //3.让下部里面相应索引号的item显示，其余的item隐藏
                    $(".tab_con .item").eq(index).show().siblings().hide();
                });
            })
        </script>

httpkaidi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery样式操作/案例：Tab栏切换

jQuery样式操作jQuery可以使用css修改简单样式，也可以使用类修改多个样式修改简单样式：参数只写属性名，则是返回属性值参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号，如果是复合属性则必须采取驼峰命名法，如果值不是数字，则必须加引号 $(function(){ //1.参数只写属性名，则是返回属性值 consol
复制链接

扫一扫

专栏目录