网站管理后台的那种点击左边链接，在右侧显示如何通过js实现？

Question

如图。不用iframe和jquery实现

Answer 1

原生啊，这个不也是很简单么？
左侧不管，就看右侧：

<div id="rightSide" class="g-rt">
    <div class="g-rt-1 z-show">
        <!--具体内容-->
    </div>
    <div class="g-rt-2">
        <!--具体内容-->
    </div>
    <div class="g-rt-3">
        <!--具体内容-->
    </div>
    <div class="g-rt-4">
        <!--具体内容-->
    </div>
    ...</div>

css:

    .g-lt{        position:relative;        /*other layout css code*/
    }    .g-lt>div{        display:none;        position:absolute;        top:0;        left:0;        
    width:100%;
    }    .z-show{        display:block;
    }

js

   function addClass(obj,className){
       obj.className+=' '+className
   }   function removeClass(obj,className){       var rep=new RegExp('\n*'+className)
       obj.className=obj.className.replace(rep,'');
   }   for(var i in arrOfBtn){
       arrOfBtn[i].onclick=function(){           var showed=document.getElementsByClassName('z-show')[0];
           removeClass(showed,'z-show');
           addClass(this,'z-show')
       }
   }

其实思路也很简单啊，把所有内容放进div里面隐藏，然后点击左侧按钮，对应右侧内容的div显示而已。
如果允许使用ng或者vue这类框架的话，那更简单了