jq切换面板

Posted 2020-12-26 xxxin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq切换面板相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        ul {
            list-style: none;
        }

        .navbar_item {
            background-color: red;
            float: left;
            margin-left: 5px;
            width: 50px;
            height: 18px;
            text-align: center;
            color: white;
            font-weight: 700;
        }

        .bar_item_on {
            background-color: greenyellow;
            border: 3px solid black;
        }

        .tab_panel div {
            border: 1px solid black;
            width: 400px;
            height: 294px;
            margin: 2px 2px;
            float: left;
        }
    </style>
</head>
<body>
    <ul>
        <li class="navbar_item">1</li>
        <li class="navbar_item">2</li>
        <li class="navbar_item">3</li>
    </ul>
    <div style="clear: both; width:410px;height:300px;border:3px solid black" class="tab_panel">
        <div>
            面板1
        </div>
        <div>
            面板2
        </div>
        <div>
            面板3
        </div>
    </div>
</body>
</html>
<script>
    $(function () {
        $(‘.tab_panel>div‘).first().show().siblings().hide();
        var aLi = $(‘.navbar_item‘);
        aLi.on(‘click‘, function () {
            $(this).addClass(‘bar_item_on‘).siblings().removeClass(‘bar_item_on‘);
            var index = $(this).index();
            $(‘.tab_panel>div‘).eq(index).show().siblings().hide();
        });
    });
</script>

以上是关于jq切换面板的主要内容，如果未能解决你的问题，请参考以下文章

在片段中添加上滑面板

用jQuery实现图片切换（JQ进阶篇）

LayaBox---多状态---时间轴动画

JQ动画完成后切换类[重复]

jQ选择器学习片段（JavaScript 部分对应）