用jQuery实现选项卡效果（tab切换）

最新推荐文章于 2021-01-15 21:04:59 发布

Submerge~

最新推荐文章于 2021-01-15 21:04:59 发布

阅读量1.7k

点赞数

文章标签： javascript jquery

本文链接：https://blog.youkuaiyun.com/MixedSignals/article/details/105835329

版权

本文详细介绍了如何使用jQuery库创建动态选项卡效果，通过切换显示不同内容区域，实现用户体验优化。步骤包括DOM操作、事件绑定及动画效果，适合初学者和进阶者提升网页交互技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .cont {
            width: 800px;
            height: 600px;
            border: 5px solid #333;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .cont ul {
            width: 100%;
            height: 60px;
            display: flex;
        }

        .cont ul li {
            flex: 1;
            font-size: 35px;
            color: #fff;
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            background: hotpink;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .cont ol {
            flex: 1;
            position: relative;
        }

        .cont ol li {
            width: 100%;
            height: 100%;
            font-size: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            background: burlywood;
            display: none;
        }

        /* 按钮标签 哪个标签有这个属性,哪个就显示特殊背景颜色 */
        .cont ul li.active {
            background: skyblue;
            color: black;
        }

        /* 内容标签 哪个标签有这个属性,哪个就显示 */
        .cont ol li.active {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="cont">
        <ul>
            <li name="ulli" class="active">按钮1</li>
            <li name="ulli">按钮2</li>
            <li name="ulli">按钮3</li>
        </ul>
        <ol>
            <li name="olli" class="active">内容1</li>
            <li name="olli">内容2</li>
            <li name="olli">内容3</li>
        </ol>
    </div>

    <script src="jquery.min.js"></script>
    <script>
        // jQuery选项卡效果，思路和执行步骤,与js完全相同
        // ①给所有的标签去除样式
        // ②给点击的标签添加样式
        // ③找到索引与点击标签相同的ol中的li标签,添加样式

        // jQuery中添加事件的语法形式
        // $().事件类型(事件处理函数(){})
        // jQuery的本质还是js事件处理函数,也会有this
        // this的指向与js中的this指向是一样的
        // 绑定事件的事件处理函数,this指向的是绑定事件的标签
        // 点谁,this指向的就是谁
        // 但是this是JavaScript语法形式
        // 要是jQuery操作,必须要转化为jQuery的语法形式 $(this)

        // 给ul中的所有li添加点击事件
        $('ul>li').click(function(){
            // $(this)        // this是当前标签,但是是js语法,$(this)变成jq对象
            // .addClass('active')   // 给当前标签,新增class属性值,也就是点中效果
            // .siblings()        // 当前标签的兄弟标签
            // .removeClass('active')        // 删除兄弟标签的class选中效果的属性值,也就是active属性值,其他class会保留
            // 上面是完成ul中li的设定,现在要设定ol中的li
            // .parent()        // 找li的直接父级,ul   
            // .next()          // 找ul的下一个兄弟标签,ol
            // .children()      // 获取ol标签中,所有的子级标签    或者 .find('li')
            // .removeClass('active')        // 给所有的li去除选中效果,也就是class active属性值 
            // .eq($(this).index())        //   $(this).index()  获取当前点击标签的索引    
                                        //   .eq( $(this).index() )  按照点击的li标签的索引,在ul中找li标签  
            // .addClass('active');        //  添加点击效果,也就是class active属性值
            $(this).addClass('active').siblings().removeClass('active').parent().next().find('li').removeClass('active').eq($(this).index()).addClass('active');          
        })

    </script>
</body>
</html>

在这里插入图片描述