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

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

css:

    .g-lt{
        position:relative;
        /*other layout css code*/
    }
    .g-lt>p{
        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')
       }
   }

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

利用ajax局部刷新

谢谢邀请。你可以直接在页面上设置好对应的p块，点击显示对应的p即可。也可以使用ajax设置局部刷新。

如果这个页面是个静态页面就比较简单，就是一个类似于二三级导航的意思：获取左侧选中项目的下标，再显示右侧内容区域对应下标的内容。如果是个动态生成的页面，不能用irame标签的话就不清楚怎么实现了

先用jquery的ajax实现，再改成js实现，就满足了你的要求：不用iframe和jquery

为什么不利用模板页做成统一的左侧菜单页面来切换页面

你说的是单页面系统吧