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

Question

如图。不用iframe和jquery实现

Answer 1

原生啊，这个不也是很简单么？左侧不管，就看右侧：<div&nbsp;id="rightSide"&nbsp;class="g-rt"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="g-rt-1&nbsp;z-show"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--具体内容--> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="g-rt-2"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--具体内容--> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="g-rt-3"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--具体内容--> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="g-rt-4"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--具体内容--> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;...</div>css:&nbsp;&nbsp;&nbsp;&nbsp;.g-lt{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*other&nbsp;layout&nbsp;css&nbsp;code*/ &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.g-lt>div{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:none;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;width:100%; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.z-show{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:block; &nbsp;&nbsp;&nbsp;&nbsp;}js&nbsp;&nbsp;&nbsp;function&nbsp;addClass(obj,className){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.className+='&nbsp;'+className &nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;function&nbsp;removeClass(obj,className){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rep=new&nbsp;RegExp('\n*'+className) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.className=obj.className.replace(rep,''); &nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;for(var&nbsp;i&nbsp;in&nbsp;arrOfBtn){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arrOfBtn[i].onclick=function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;showed=document.getElementsByClassName('z-show')[0]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;removeClass(showed,'z-show'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addClass(this,'z-show') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;}其实思路也很简单啊，把所有内容放进div里面隐藏，然后点击左侧按钮，对应右侧内容的div显示而已。如果允许使用ng或者vue这类框架的话，那更简单了