原生啊，這個不也是很簡單么？
左側不管，就看右側：

<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這類框架的話，那更簡單了