javascript - 网站管理后台的那种点击左边链接,在右侧显示如何通过js实现?

 狂浪的眼神 发布于 2022-11-09 07:47

如图。不用iframe和jquery实现

7 个回答
  • 你说的是单页面系统吧

    2022-11-12 01:46 回答
  • 为什么不利用模板页做成统一的左侧菜单页面来切换页面

    2022-11-12 01:46 回答
  • 先用jquery的ajax实现,再改成js实现,就满足了你的要求:不用iframe和jquery

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

    2022-11-12 01:46 回答
  • 谢谢邀请。你可以直接在页面上设置好对应的p块,点击显示对应的p即可。也可以使用ajax设置局部刷新。

    2022-11-12 01:46 回答
  • 利用ajax局部刷新

    2022-11-12 01:46 回答
  • 原生啊,这个不也是很简单么?
    左侧不管,就看右侧:

    <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这类框架的话,那更简单了

    2022-11-12 01:46 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有