jq切换面板

最新推荐文章于 2020-09-28 11:43:42 发布

weixin_30299709

最新推荐文章于 2020-09-28 11:43:42 发布

阅读量115

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/xxxin/p/9394988.html

版权

<!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>

转载于:https://www.cnblogs.com/xxxin/p/9394988.html

weixin_30299709

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq切换面板

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <script src="http://ap...
复制链接

扫一扫