码迷,mamicode.com
首页 > Web开发 > 详细

HTML #左侧菜单

时间:2017-08-25 13:45:49      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:ntb   span   next   head   内容   utf-8   function   round   splay   

###

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .headcolor{
            background-color: gray;
            height: 100px;

        }
        .bodycolor{
            background-color: green;
            width: 50px;
        }
        .hide{
            display: none;
        }
        .content1{
            color: red;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="headcolor">111</div>
    <div>
        <div>
            <div id="i1" class="bodycolor" onclick="hide(‘i1‘)">菜单一</div>
            <div class="hide">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
            </div>
        </div>
        <div>
        <div id="i2" class="bodycolor" onclick="hide(‘i2‘)">菜单二</div>
            <div class="hide">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
            </div>
        </div>
        <div>
        <div id="i3" class="bodycolor" onclick="hide(‘i3‘)">菜单三</div>
            <div class="hide">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
            </div>
        </div>
        </div>
    <script>
        function hide(nid) {
            var d = document.getElementById(nid);
            var item_list = d.parentElement.parentElement.children;
            console.log(d);
            for(var i=0;i<item_list.length;i++){
                item_list[i].children[1].classList.add(hide);
            }
            d.nextElementSibling.classList.remove("hide")
        }
//        function hide(nid) {
//            var d = document.getElementById(nid);
//
//            console.log(d);
//            d.nextElementSibling.classList.remove(‘hide‘);
//            }
    </script>
</body>
</html>

 

###

菜单一
内容1
内容2
内容3
菜单二
内容1
内容2
内容3
菜单三
内容1
内容2
内容3

HTML #左侧菜单

标签:ntb   span   next   head   内容   utf-8   function   round   splay   

原文地址:http://www.cnblogs.com/lwsup/p/7427435.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!