html中点击左边菜单右边内容切换

2024-04-18 14:10:45

左边菜单,点击左边右边内容改变

作为新手, 拿到真的很棘手。 很多人想到的是用iframe, 其实我的第一感也是, 但是好像iframe正在被淘汰,  所以一直在寻找新方法。、
当然, 我还是先把iframe方法贴出来, 这个方法是适用于对js不熟悉,或者刚入前端不就的童鞋们。 
我们公司要做一个这样的后台系统(如下图所示); 第一次接触后台,而且还带有图表, 着实小紧张了一把。经过多次在网上搜索和晚上的冥思苦想,最后找到了两个解决方案;
1). 做成静态的
什么叫静态的? 视觉欺骗而已。 就是左边的结构还是正常写,并且在不同的页面不同的样子,每一个页面都有一个左边的menu菜单, 在点击的,就不容易察觉, 下面以bootstrap ace后台为例子。

 <li><a href="#"><div class="clearfix"><span class="pull-left">Software Update</span><span class="pull-right">65%</span></div><div class="progress progress-mini "><div style="width:65%" class="progress-bar "></div></div></a></li><li><a href="#"><div class="clearfix"><span class="pull-left">Hardware Upgrade</span><span class="pull-right">35%</span></div><div class="progress progress-mini "><div style="width:35%" class="progress-bar progress-bar-danger"></div></div></a></li>

  

如果上面的父级菜单没有连接, 逻辑就有点不同了。 如果没有, 点击父级菜单的时候, 就要求打开父级菜单, 然后才能点击下面的菜单。 显然上面的方法得升级了。 用jquery写一个点击事件就ok, 就不演示了。
2)iframe方法
<ul class="nav" id="side-menu"><li><a href="index.html" id="firstNode" class="cur" target="menuFrame"><i class="fa fa-bar-chart-o fa-fw"></i><b>统计报表</b></a><ul class="nav nav-second-level"><li><a href="import.html" target="menuFrame">进货报表</a></li><li><a href="export.html" target="menuFrame">出货报表</a></li><li><a href="check.html" target="menuFrame">毛利报表</a></li></ul></li><li><a href="warehouse.html" target="menuFrame"><i class="fa fa-table fa-fw"></i><b>仓库管理</b></a><ul class="nav nav-second-level"><li><a href="goodslist.html" target="menuFrame">商品列表</a></li><li><a href="check.html" target="menuFrame">盘点</a></li><li><a href="outbound.html" target="menuFrame">出库列表</a></li><li><a href="instorage.html" target="menuFrame">入库列表</a></li></ul></li><li><a href="#"><i class="fa fa-edit fa-fw"></i><b>订单管理</b></a><ul class="nav nav-second-level"><li><a href="orderlist.html" target="menuFrame">订单列表</a></li><li><a href="forms.html" target="menuFrame">采购申请</a></li></ul></li><li><a href="system.html" target="menuFrame"><i class="fa fa-wrench fa-fw"></i><b>系统设置</b></a><ul class="nav nav-second-level"><li><a href="user.html" target="menuFrame">权限设置</a></li><li><a href="personnel.html" target="menuFrame">资料管理</a></li></ul></li><li><a href="rewritepwd.html" target="menuFrame"><i class="glyphicon glyphicon-pencil"></i><b>修改密码</b></a></li></ul>

  先写出一个上菜的菜单。 千万记住链接后面的target得要,而且名字需要一样,等会会用到

 <div id="page_content"><iframe id="menuFrame" name="menuFrame" src="index.html" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%" height="100%; float:left"></iframe></div>

  在内容的区域添加上面代码,插入iframe, 这里的name对应上面链接里面的name, src="index.html", 表示默认页是index.html, 至于后面的那些属性是控制iframe样式的。 以上iframe就告一段落了。

二. 用ajax方法实现点击左边, 右边出现相应的页面。

今年老大叫我做一个后台, 而且他指出别人没有用iframe, 问我行不行。 只能说行。 没有在网上查看过多的资料, 某天晚上突然想起ajax 里面有一个load方法, 这个方法可以载入其他页面的内容。 于是有了灵感, 开始也只是尝试一下:

("li").on('click', function() {var href = $(this).find("a").attr('href');$('#mainContents').empty();$('#mainContents').load("../new/" + href);//阻止跳转$(this).parents('li').addClass('active').siblings('li').removeClass('active');return false;});

  点击li, 找到li里面对应的链接地址,阻止url跳转,然后在内同区域载入找到的url对应的地址。 惊奇的发现,试验了也可行。 然而新问题来了。 用load方法,只能载入已经加载完毕的页面,如果我们的页面没有加载完毕呢, 或者修改了, 怎么办?? 所以还是用ajax 吧。

var menu = $("#menuID>li h2"),srcLi = menu.next('ul').find('li');srcLi.on('click', function(e) {var href = $(this).find("a").attr('href');$('#mainContents').empty();$.ajax({//  beforeSend: function(){//      $('#mainContents').html('正在请求');//  },// complete: function(){//      $('#mainContents').html('加载完毕');//     },type: "GET",url: "../new/" + href,success: function(data) {$('#mainContents').append(data);}});//阻止跳转$(this).parents('li').addClass('active').siblings('li').removeClass('active');return false;});menu.on('click', function() {$(this).next('ul').slideToggle(400);$(this).stop('false').toggleClass('on');});

  以上的思路, 和开始时候的load方法一样。首先找到每一个li 里面对应的url, 然后清空 右侧的内容, 用ajax动态获取不同的页面, 就追加到右侧的内容中。 阻止跳转。

另外,附上一个相似的代码,这是点击一个树状菜单出来不同的内容。第一次用ajax调用json数据。着实小兴奋了一把。这个与上面说的内容一毛钱的关系也没有,只是为了祭奠一下我的第一次而已

$.ajax({type: "post",url: "../new/txt/txt1.json",dataType: "json",success: function(data) {$("#blank").empty();var employees = data.employees;$.each(data.employees, function(k, v) {                           var tpl1 ='<div class="halfLeft">' + '<span class="aboutJobs">' + v.职位 + '</span>: ' + '<span class="aboutNames">' + v.姓名 + '</span>;<br/>' + '</div>';$("#blank").append(tpl1);});}
})

调用的json数据为

{"employees": [{ "姓名": "张三", "职位":"php后台", "email": "aaaa" },{ "姓名": "李四", "职位":"人事经理", "email": "bbbb" },{ "姓名": "王五", "职位":"Harold", "email": "cccc" },{ "姓名": "Isaac", "职位": "Asimov", "genre": "science fiction" },{ "姓名": "Tad", "职位": "Williams", "genre": "fantasy" },{ "姓名": "Frank", "职位": "Peretti", "genre": "christian fiction" },{ "姓名": "Eric", "职位": "Clapton", "instrument": "guitar" },{ "姓名": "Sergei", "职位": "Rachmaninoff", "instrument": "piano" }],"test": [{ "姓名": "赵六", "职位":"php后台", "email": "aaaa" },{ "姓名": "齐七", "职位":"人事经理", "email": "bbbb" },{ "姓名": "王五", "职位":"Harold", "email": "cccc" },{ "姓名": "Isaac", "职位": "Asimov", "genre": "science fiction" },{ "姓名": "Tad", "职位": "Williams", "genre": "fantasy" },{ "姓名": "Frank", "职位": "Peretti", "genre": "christian fiction" },{ "姓名": "Eric", "职位": "Clapton", "instrument": "guitar" },{ "姓名": "Sergei", "职位": "Rachmaninoff", "instrument": "piano" }]
}

html中点击左边菜单右边内容切换相关推荐

  1. java中 菜单的触发事件_javaweb ajax+div实现左边菜单右边内容时点击菜单应该触发事件但是右边没反应...

    这样写点击左边菜单时无论怎么点击,叫content那个div都没有内容都不会更新,我猜是不是css的问题 这是代码,请问在此基础上要怎么写才能实现左边菜单右边内容呢 JSP Page 22222333 ...

  2. C#上位机与单片机的完美结合(内附有用户登录,注册,截图,温度采集,历史数据展示,左边菜单右边内容展示的主界面)

    基于C#的用户登录,注册界面,头像截屏,左侧菜单右边显示内容的主界面,与单片机结合的温度检测,历史数据分析,完美与SQLServer结合 1用户登录界面 2注册界面 3用户头像拍摄截取 4灯光展示 5 ...

  3. html文字如何显示在右侧,html点击左边代码右边显示相应的内容

    html中点击下载的代码怎么写 点击一个链接以后,直接弹出一个对话框,提示用户是否将目标文件保存到按钮显示 好像只有 Firefox 和 Chrome内核 支持 download 属性,可以试一下 所 ...

  4. 【JQuery】JQuery+JS实现点击左边, 右边出现相应的页面

    一. 用iframe方法实现点击左边, 右边出现相应的页面. 我做一个后台, 而且他指出别人没有用iframe, 问我行不行. 只能说行. 没有在网上查看过多的资料, 某天晚上突然想起ajax 里面有 ...

  5. Vue左边与右边内容相关联

    通过:class把左边和右边的内容关联起来 <template><div><!-- 主体 --><div class="con">& ...

  6. jsp 点击左边菜单 菜单栏没有停在二级菜单上_Excel – 如何快速导入网页上的表格?...

    当我们需要引用网站上一些公开数据的时候,会遇到两种情形:一种是网页上有表格形式,另一种是看上去连表格都没有,只有罗列出来的数据. 那如果要把这些数据复制.粘贴到 Excel 种的话,就要花大量时间调整 ...

  7. uniapp中实现每次点击左侧菜单右边区域都从顶部开始

    使用scroll-view容器,借助滚动事件捕获当前距离顶部距离,然后给scroll-top重新设置为0实现滚动 <scroll-view class="right" scr ...

  8. android fragment点击返回键实现内容切换?

    ============问题描述============ 我有一个fragment,上有一个button和textview,默认button是隐藏的,通过点击菜单栏上的一个详细信息的按钮,将butto ...

  9. bootstrap中点击左边展开

    <div id="sideNav" href=""><i class="material-icons dp48 glyphicon- ...

最新文章

  1. string find()函数
  2. 如何由jdk的安装版本改成非安装版本
  3. ML之SVM:基于SVM(sklearn+subplot)的鸢尾花iris数据集的前两个特征(线性不可分的两个样本),判定鸢尾花是哪一种类型
  4. Nginx服务器的Web请求处理机制
  5. 开源软件软件著作权执照详细研究和实例分析
  6. python中一切皆是对象,对象都是在堆上存放的,一切都是指针
  7. 【ZJCPC2018 第15届 浙江省赛】The 15th Zhejiang Provincial Collegiate Programming Contest(MABLJK 6题)
  8. Hadoop Trash回收站使用指南
  9. [POJ1035]Spell checker
  10. Myeclipse打包生成jar文件 A exception has Occured问题解决
  11. 在Python中从头开始模拟退火
  12. head first设计模式之设计原则
  13. python毕业设计作品基于django框架 教室图书馆座位预约系统毕设成品(6)开题答辩PPT
  14. opencv+ArcFace人脸识别
  15. 九八k用计算机打出来的音乐,背景音乐大全
  16. 免费ICP域名备案查接口
  17. 第五章 编码传输中的码率控制
  18. cesium 实现地形挖洞的拖动效果
  19. 最常用英语口语200句
  20. 交通·未来第3期:基于实时WiFi-蓝牙检测数据的交通目标定位及出行模式甄别技术...

热门文章

  1. php slim框架 教程,Slim —— PHP web开发微框架
  2. Jmeter命令行运行实例讲解
  3. win10配置html桌面,Windows配置 | Win10系统配置 - ManageEngine Desktop Central
  4. 德国应用计算机科学,2021德国计算机科学与技术专业大学排名TOP10
  5. 吴汝俊主演的新京剧电影《孟母三迁》首映
  6. 广电用户画像分析之根据客户消费内容添加标签
  7. Google I/O 2017
  8. 华为王俊:Weink将持续携手伙伴做行业开拓
  9. 2020-12-14
  10. 【华为OD机试真题 C++语言】35、解密犯罪时间 | 机试真题+思路参考+代码解析