网站管理后台的那种点击左边链接,在右侧显示如何通过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这类框架的话,那更简单了


你说的是单页面系统吧


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


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


利用ajax局部刷新


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


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



相关阅读:
centos中查询php配置文件
node怎么判断是开发环境还是生产环境??
怎样用jquery生成带有倾斜角度的验证码
如何滑动页面,当元素出现在当前屏幕时,才执行动画
intell idea打开项目后卡住,界面一直白色,求拯救!
在前端工程化的趋势下,php还有必要去渲染视图层吗?
奇异的代码 之 PHP中的错误和异常
用ajax调取的图片url,图片是存在webroot/images/目录下,为什么图片不能及时加载?
kill命令如何一次杀死多个进程
求react 中使用fetch的demo
大类点击之后得到的列表用pagination 插件进行了ajax分页问题
关于正确理解javascript的同步,异步的执行,Event Loop事件循环,异步执行完如何通知主线程的demo
webpack 怎么引入semantic-ui?
Cordova做的APP里,希望点击按钮时的颜色变化更明显一些,以便更清楚地给用户提示,该怎么弄?
ipad调用UIActivityViewController时系统分享不能完全显示。
GitLab配置CAS认证,前端WEB正常. 但是做git clone等操作时报错如下
django 如何实现文章按时间归档啊
angularjs ng-bind的用法
为什么start = parseInt(spans[this.index].style.top);是undefined?
vue单页面能调到新的页面吗?



快速导航

Copyright © 2016 phpStudy |