jq切換皮膚

涼生涼憶亦涼心發表於2018-07-31
<!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>

　　

相關文章