标签菜单栏，点击一个菜单，显示菜单小标题，另外2个菜单不现实小标题内容 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            height: 1000px;
            width: 100%;
        }
        .menu{
            float: left;
            background-color: beige;
            width: 30%;
            height: 500px;
        }
        .content{
            float: left;
            background-color: rebeccapurple;
            width: 70%;
            height: 500px;
        }
        .title{
             background-color: aquamarine;
            line-height: 40px;
        }
        .hide{
            display: none;
            /*隐藏*/
        }
    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
    <div class="item">
        <div class="title" onclick="show(this)">菜单一</div>
        <div class="con">
            <div>111</div>
            <div>111</div>
            <div>111</div>
        </div>
    </div>
        <div class="item">
        <div class="title"onclick="show(this)">菜单二</div>
        <div class="con hide"><!--隐藏起来，一个类名2个名字功能不同-->
            <div>222</div>
            <div>222</div>
            <div>222</div>
        </div>
    </div>
        <div class="item">
        <div class="title"onclick="show(this)">菜单三</div>
        <div class="con hide">
            <div>333</div>
            <div>333</div>
            <div>333</div>
        </div>
    </div>
    </div>
    <div class="content"></div>
</div>

    <script src="jquery-3.3.1.min.js"></script>
    <script>
        function show(hello) {//jquery对象取的方法,不加引号-----$(hello)
            $(hello).next().removeClass("hide");//移除hide名字，显示
            $(hello).parent().siblings().children(".con").addClass("hide");//加上hide名字重新隐藏item
            //拿到菜单一二三标签，找到父标签item,找到sibilings标签即另外2个item标签，
            // 对另2个item标签children标签找到icon标签，加上类名hide
        }
    </script>
</body>
</html>

 

posted @ 2018-06-20 17:57  未来的技术  阅读(527)  评论(0)    收藏  举报