宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取

本例子是通过改变元素的class来实现TAB选项卡功能,只需要10行(甚至更少)JS就可以实现,没什么特别的,只是为了新手提供一些思路。

最简单的jQuery选项卡

预览地址:最简单的jQuery选项卡

所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>最简单的jQuery选项卡 - 独乐博客</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <style>
        body{
            background: #ccc;
        }
        .tab{
            width: 400px;
            height: 300px;
            margin: 50px auto;
        }
        .tab_hd{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #fff;
        }
        .tab_hd span{
            display: block;
            float: left;
            padding: 0 20px;
            height: 100%;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
        }
        .tab_hd span.current{
            border-radius: 4px 4px 0 0;
            background: #fff;
            color: red;
        }

        .tab_con{
            position: relative;
            height: 259px;
            background: #fff;
            border-radius: 0 4px 4px 4px;
            overflow: hidden;
        }
        .tab_con .box{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding:10px;
            display: none;
        }
        .tab_con .box.current{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_hd">
            <span class="current">TAB 一</span>
            <span>TAB 二</span>
            <span>TAB 三</span>
        </div>
        <div class="tab_con">
            <div class="box current">内容一</div>
            <div class="box">内容二</div>
            <div class="box">内容三</div>
        </div>
    </div>

    <script>
        var $tabBtn = $('.tab_hd span');
        var $tabBox = $('.tab_con .box');
        var $index;
        $tabBtn.each(function () {
            $(this).click(function () {
                // 获取当前点击的头部控制按钮的索引
                $index = $(this).index();
                // 设置当前点击的头部按钮的class
                $(this).addClass('current').siblings('span').removeClass('current');
                // 通过当前点击按钮的索引来设置内容块的显示隐藏
                $tabBox.eq($index).addClass('current').siblings('.box').removeClass('current');
            })
        })
    </script>
</body>
</html>

以上方法只是click事件的TAB,当然还可以做成mousemove。不过如果做后者的话,最好做个函数节流,这里就多说了,之后有空了,在介绍什么是函数节流。

标签: js, demo

仅有一条评论

  1. 漠白

    测试评论

添加新评论