JQ - 选项卡(极简) -

image.png
<!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>Document</title>
    <style media="screen">
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #tab ol li {
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #333;
            box-sizing: border-box;
            background-color: #eee;
        }

        #tab ol li.active {
            color: #fff;
            background-color: #555;
        }

        #tab ul li {
            width: 300px;
            height: 180px;
            line-height: 180px;
            border: 1px solid #333;
            box-sizing: border-box;
            text-align: center;
            display: none;
        }
    </style>
</head>

<body>
    <div id="tab">
        <ol class="control" style="overflow: hidden;">
            <li class="active">新闻</li>
            <li>财经</li>
            <li>金融</li>
        </ol>
        <ul class="panel">
            <li>新闻</li>
            <li>财经</li>
            <li>金融</li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        var $Taoli = $('#tab ol li'); //  获取 顶部选项
        var $Tauli = $('#tab ul li'); //  获取 底部面板

        $Tauli.eq(0).show(); //  第一个面板 显示
        $Taoli.on('click', function() {
            // 给当前选中の选项添加 active 样式 、其他的兄弟选项去掉样式
            $(this).addClass('active').siblings().removeClass('active');
            // 给当前选中の面板 显示 、其他的兄弟面板 隐藏
            $Tauli.eq($(this).index()).show().siblings().hide();
        })
    </script>
</body>

</html>
JQ - 选项卡(极简) -

推荐阅读更多精彩内容
