如图。不用iframe和jquery实现
你说的是单页面系统吧
为什么不利用模板页做成统一的左侧菜单页面来切换页面
先用jquery的ajax实现,再改成js实现,就满足了你的要求:不用iframe和jquery
如果这个页面是个静态页面就比较简单,就是一个类似于二三级导航的意思:获取左侧选中项目的下标,再显示右侧内容区域对应下标的内容。如果是个动态生成的页面,不能用irame标签的话就不清楚怎么实现了
谢谢邀请。你可以直接在页面上设置好对应的p块,点击显示对应的p即可。也可以使用ajax设置局部刷新。
利用ajax局部刷新
原生啊,这个不也是很简单么?
左侧不管,就看右侧:
<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这类框架的话,那更简单了