基于原生js和flex布局开发侧边栏

 css:

body{
    padding: 0 10%;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.flex-box{
    display: flex;
    border: 1px solid;
}
.flex-left{
     200px;
    text-align: center;
    background: peru;
}
.flex-right{
    flex-grow: 1;
}
.flex-left li{
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    border-bottom: 1px solid;
}
.flex-left li:last-child{
    border-bottom: none;
}
.active{
    background: #8b8bde;
}
.hide{
    display: none;
}

html:

<div class="flex-box">
    <div class="flex-left">
        <ul>
            <li class="li-node active">标题一</li>
            <li class="li-node">标题二</li>
            <li class="li-node">标题三</li>
            <li class="li-node">标题四</li>
        </ul>
    </div>
    <div class="flex-right">
        <div class="div-node">页面1</div>
        <div class="div-node hide">页面2</div>
        <div class="div-node hide">页面3</div>
        <div class="div-node hide">页面4</div>
    </div>
</div>

js:

<script>
    window.onload = function() {
        var liArr = document.getElementsByClassName('li-node');
        var divArr = document.getElementsByClassName('div-node');
        console.log(liArr);
        console.log(divArr);
        for(var i=0;i<liArr.length;i++){
        (function(i) {
            liArr[i].onclick = function(){
                changeClass();
                liArr[i].className = "li-node active";
                divArr[i].className = "div-node";
            }
        })(i)
        }
        var changeClass = function(){
        for(var i=0;i<liArr.length;i++){
            (function(i) {
                liArr[i].className = "li-node";
                divArr[i].className = "div-node hide";
            })(i)
        }
        }
    }
</script>