html中点击左边菜单右边内容切换
左边菜单,点击左边右边内容改变
<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>
<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中点击左边菜单右边内容切换相关推荐
- java中 菜单的触发事件_javaweb ajax+div实现左边菜单右边内容时点击菜单应该触发事件但是右边没反应...
这样写点击左边菜单时无论怎么点击,叫content那个div都没有内容都不会更新,我猜是不是css的问题 这是代码,请问在此基础上要怎么写才能实现左边菜单右边内容呢 JSP Page 22222333 ...
- C#上位机与单片机的完美结合(内附有用户登录,注册,截图,温度采集,历史数据展示,左边菜单右边内容展示的主界面)
基于C#的用户登录,注册界面,头像截屏,左侧菜单右边显示内容的主界面,与单片机结合的温度检测,历史数据分析,完美与SQLServer结合 1用户登录界面 2注册界面 3用户头像拍摄截取 4灯光展示 5 ...
- html文字如何显示在右侧,html点击左边代码右边显示相应的内容
html中点击下载的代码怎么写 点击一个链接以后,直接弹出一个对话框,提示用户是否将目标文件保存到按钮显示 好像只有 Firefox 和 Chrome内核 支持 download 属性,可以试一下 所 ...
- 【JQuery】JQuery+JS实现点击左边, 右边出现相应的页面
一. 用iframe方法实现点击左边, 右边出现相应的页面. 我做一个后台, 而且他指出别人没有用iframe, 问我行不行. 只能说行. 没有在网上查看过多的资料, 某天晚上突然想起ajax 里面有 ...
- Vue左边与右边内容相关联
通过:class把左边和右边的内容关联起来 <template><div><!-- 主体 --><div class="con">& ...
- jsp 点击左边菜单 菜单栏没有停在二级菜单上_Excel – 如何快速导入网页上的表格?...
当我们需要引用网站上一些公开数据的时候,会遇到两种情形:一种是网页上有表格形式,另一种是看上去连表格都没有,只有罗列出来的数据. 那如果要把这些数据复制.粘贴到 Excel 种的话,就要花大量时间调整 ...
- uniapp中实现每次点击左侧菜单右边区域都从顶部开始
使用scroll-view容器,借助滚动事件捕获当前距离顶部距离,然后给scroll-top重新设置为0实现滚动 <scroll-view class="right" scr ...
- android fragment点击返回键实现内容切换?
============问题描述============ 我有一个fragment,上有一个button和textview,默认button是隐藏的,通过点击菜单栏上的一个详细信息的按钮,将butto ...
- bootstrap中点击左边展开
<div id="sideNav" href=""><i class="material-icons dp48 glyphicon- ...
最新文章
- string find()函数
- 如何由jdk的安装版本改成非安装版本
- ML之SVM:基于SVM(sklearn+subplot)的鸢尾花iris数据集的前两个特征(线性不可分的两个样本),判定鸢尾花是哪一种类型
- Nginx服务器的Web请求处理机制
- 开源软件软件著作权执照详细研究和实例分析
- python中一切皆是对象,对象都是在堆上存放的,一切都是指针
- 【ZJCPC2018 第15届 浙江省赛】The 15th Zhejiang Provincial Collegiate Programming Contest(MABLJK 6题)
- Hadoop Trash回收站使用指南
- [POJ1035]Spell checker
- Myeclipse打包生成jar文件 A exception has Occured问题解决
- 在Python中从头开始模拟退火
- head first设计模式之设计原则
- python毕业设计作品基于django框架 教室图书馆座位预约系统毕设成品(6)开题答辩PPT
- opencv+ArcFace人脸识别
- 九八k用计算机打出来的音乐,背景音乐大全
- 免费ICP域名备案查接口
- 第五章 编码传输中的码率控制
- cesium 实现地形挖洞的拖动效果
- 最常用英语口语200句
- 交通·未来第3期:基于实时WiFi-蓝牙检测数据的交通目标定位及出行模式甄别技术...
热门文章
- php slim框架 教程,Slim —— PHP web开发微框架
- Jmeter命令行运行实例讲解
- win10配置html桌面,Windows配置 | Win10系统配置 - ManageEngine Desktop Central
- 德国应用计算机科学,2021德国计算机科学与技术专业大学排名TOP10
- 吴汝俊主演的新京剧电影《孟母三迁》首映
- 广电用户画像分析之根据客户消费内容添加标签
- Google I/O 2017
- 华为王俊:Weink将持续携手伙伴做行业开拓
- 2020-12-14
- 【华为OD机试真题 C++语言】35、解密犯罪时间 | 机试真题+思路参考+代码解析