jQuery 之 TAB切换菜单

川长思鸟来 2022-01-17 10:21 294阅读 0赞

### 代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery3.js"></script>
        <style>
            .menu{
                height: 38px;
                background-color: #eeeeee;
                line-height: 38px;
            }
            .menu .menu-item{
                float: left;
                border-right: 1px solid red;
                padding: 0 10px;
                cursor: pointer;
            }
            .content{
                min-height: 100px;
                border:2px solid #eeeeee;
            }
            .hide{
                display: none;
            }
            .active{
                background-color: #428bca;
            }
        </style>
    </head>
    <body>
        <div style="width: 700px;margin: 0 auto">
            <div class="menu">
                <div class="menu-item active" m="1">菜单一</div>
                <div class="menu-item" m="2">菜单二</div>
                 <div class="menu-item" m="3">菜单三</div>
            </div>
            <div class="content">
                <div c="1">内容一</div>
                <div class="hide" c="2">内容二</div>
                <div class="hide" c="3">内容三</div>
            </div>
        </div>
        <script>
            $(".menu-item").click(function () {
                //为当触发的标签添加active css
                $(this).addClass('active')
                //为当前触发标签的兄弟标签删除active css
                $(this).siblings().removeClass('active')
                //获取当前标签下m的属性值
                var target = $(this).attr('m')
                //根据当前标签获取的m值，在内容标下的所有孩子标签下查找c=target的标签
                //然后删除hide css ，并为其它兄弟标签添加hide css
                $('.content').children("[c='"+target+"']").removeClass('hide').siblings().addClass('hide')
            })
        </script>
    </body>
    </html>

### 展示： ###

![jQuery 之  TAB切换菜单][jQuery _ TAB]

转载于:https://blog.51cto.com/12965094/2374138

[jQuery _ TAB]: https://s1.51cto.com/images/blog/201904/04/709edbebd16e50da24922bbf40eea6aa.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=