侧栏选项卡闭包处理原生js处理兄弟元素

最新推荐文章于 2024-11-13 01:18:00 发布

weixin_33894992

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qianduangaoshou/p/6605348.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .main{
            overflow: hidden;
            zoom: 1;
            border: 1px solid blue;
        }
        .menuLeft,.content{
            float: left;
        }
        .menuLeft{
            width: 100px;
            border: 1px solid black;
            height: 200px;
        }
        .menuLeft ul li {
            list-style-type: none;
            height: 33.3%;
            cursor: pointer;

        }
        .content{
            width: 400px;
            border: 1px solid black;
            height: 200px;
        }
        .content div:first-child{
            display: block;
        }
        .content div{
            display: none;
        }
        .active{
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="menuLeft">
        <ul>
            <li class="active">缪成龙</li>
            <li>朱计划</li>
            <li>欧阳欣</li>
            <li>张宁宁</li>
        </ul>
    </div>
    <div class="content">
        <div>
            <p>甘肃省</p>
        </div>
        <div>
            <p>安徽省</p>
        </div>
        <div>
            <p>江西省</p>
        </div>
        <div>
            <p>山东省</p>
        </div>

    </div>
</div>
<script type="text/javascript">
    /*
    * 侧栏选项卡
    * 注意：在选择默认样式时，不要用伪类，否则不好改变
    * ，在html样式中添加样式，或者在css中用style添加
    *要用classList代替className
    * classList有四种方法:  记住
    * add(value)
    * contains(value)
    * remove(value)
    * toggle(value)
    *
    *
    *
    *
    *
    * */
    window.οnlοad=function(){
        var list=document.querySelectorAll("li");
        var Odiv=document.querySelector(".content").querySelectorAll("div");
        for(var i=0;i<list.length;i++){
            (function (i) {
                /*
                * 闭包处理
                * 这样没回返回的就是每个的i了
                *
                * */
                list[i].οnclick=function(){
                    list[i].classList.add("active");
                    Odiv[i].style.display="block";
                    for(var j=0;j<list.length;j++){
                        if(j!==i){
                        /*原生js这样处理兄弟元素
                        */
                            Odiv[j].style.display="none";
                            list[j].classList.remove("active");
                        }
                    }

                }
            })(i)
        }
    }

</script>
</body>
</html>

　　效果如下图：