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

问题描述

问 题

如图。不用iframe和jquery实现

解决方案

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

<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这类框架的话，那更简单了

这篇关于javascript - 网站管理后台的那种点击左边链接，在右侧显示如何通过js实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！