jquery005-菜单-内容-联动操作 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            width: 600px;
            height: 60px;
            background-color: #9a9a9a;
        }
        .item{
            width: 198px;
            float: left;
            border: 1px solid rebeccapurple;
            height: 58px;
            line-height: 58px;
        }
        .c_item{
            width: 598px;
            border: 1px solid rebeccapurple;
            height: 200px;
            background-color: #eeeeee;
        }
        .hide{
            display: none;
        }
        .b_c{
            background-color: #e75e15;
        }
    </style>
</head>
<body>
    <div style="width: 300px;margin: 0 auto">
        <div class="menu" >
            <div class="item">
                菜单一
            </div>
            <div class="item">
                菜单二
            </div>
            <div class="item">
                菜单三
            </div>

        </div>
        <div class="content">
            <div class="c_item">
                内容一
            </div>
            <div class="c_item hide">
                内容二
            </div>
            <div class="c_item hide">
                内容三
            </div>
        </div>

    </div>
    <script src="jquery3.6.1.js"></script>
    <script>
        function click_item(){
            // $(this).addClass('b_c');
            $(this).css('background','#e75e15').siblings().css('background','');
            var index = $(this).index();
            $('.content').children().eq(index).removeClass('hide').siblings().addClass('hide');

        }
        //菜单栏绑定
        $('.menu>.item').click(click_item);
    </script>
</body>
</html>
posted @ 2022-11-26 11:43  wode-wode  阅读(35)  评论(0)    收藏  举报