网站管理后台的那种点击左边链接,在右侧显示如何通过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单页面能调到新的页面吗?



快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 街道基层组织建设工作总结 带您游景谷 我这样的男人伤不起 小学六年级作文400字:去田里 最佳六一儿童节主持词 二年级上学期数学教学计划 恋爱╭ァ喜欢,是一种心情 初中班主任工作寄语 老妈的脾气作文500字 生涯规划 青春,干杯! 有时,我也想写一本书作文700字 我在伞下 我的家乡——大柳塔作文700字 清明节踏青作文300字 感恩那淡淡的雨季作文 物品交流会5 贪心的小老鼠 滑雪400字 坚强像利斧作文1500字 仰望天堂 成 人笑话:嫖妓不给钱 风景怡人的四洞沟 小学四年级作文400字:我发现了藏在衣服中的爱 读《凝聚哎的眼睛》有感作文400字 只盼天涯,各自安好 给时间一点时间 桃花妹妹 十里莲塘450字 六一儿童节作文:我讨厌六一的四大歪理 2014年出纳年终总结 又见银杏叶儿黄 我学会了什么的作文:洗碗 相爱.很坎坷. 通过本次考试,我长大了 九月在期待中来 新年愿望的英语作文 珍惜你现在有所拥有的就是你最大 小宝和老大 区2012年人大代表工作总结 友谊_关于友谊的小学生作文550字 30岁后,你会在哪里? 刺痛人心的句子 那首关于我们的歌,你把结局唱给了谁听 成长的历程600字 看着你,突然有那么一点伤感 笨蛋:傻苽、想要的很简单而已、、、 我想发明的东西作文 市审计局工作总结及工作计划 喜迎建党90周年校园青年文化节活动方案 再见,我的校园“同学”

Copyright © 2016 phpStudy |