html/jsp实现点击左侧目录/菜单，右侧加载不同效果的功能

效果展示

我做的是计算机组成原理在线学习的知识点总结,左侧是目录，点击左侧的目录，右侧会跳转到相应的知识点，左侧不变.

所用技术：BootStrap,JQuery,html/jsp

页面：

1. section.jsp：主页面，引入以下两个副页面
2. sectionLeft：主页面左侧侧目录
3. sectionRight：主页面右侧的详细内容

section.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>计算机组成原理-章节知识点学习</title><script src="js/jquery-3.3.1.min.js"></script><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js "></script><script src="js/getParameter.js"></script><script>function parentLoadRight(id) {$("#right").prop("src","sectionRight.jsp#"+id+"");}</script>
</head>
<body><div>
<%--    章节目录--%><div style="float: left"><iframe src ="sectionLeft.jsp" width="300px" height="800px" scrolling="yes"><p>Your browser does not support iframes.</p></iframe></div><%--    知识点--%><div style="float: right"><iframe id="right" src ="sectionRight.jsp" width="1100px" height="800px" scrolling="yes" style="padding-left: 20px;"><p>Your browser does not support iframes.</p></iframe></div>
</div></body>
</html>

sectionLeft.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>目录</title><script src="js/jquery-3.3.1.min.js"></script><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js "></script><script>function loadRight(id) {parent.parentLoadRight(id);}</script>
</head>
<body>
<ul class="nav nav-pills nav-stacked"><li role="presentation" ><a onclick="loadRight(1)" href="#">第一章 计算机系统概论</a></li><li role="presentation" ><a onclick="loadRight(1.1)" href="#">1.1电子数字计算机的分类</a></li><li role="presentation" ><a onclick="loadRight(1.2)" href="#">1.2数字计算机的五大部件及各自主要功能</a></li><li role="presentation" ><a onclick="loadRight(1.3)" href="#">1.3计算机软件</a></li><li role="presentation"><a onclick="loadRight(2)" href="#">第二章 内部存储器 </a></li><li role="presentation" ><a onclick="loadRight(2.1)" href="#">2.1存储器的分类</a></li><li role="presentation" ><a onclick="loadRight(2.2)" href="#">2.2存储器的分级</a></li><li role="presentation" ><a onclick="loadRight(2.3)" href="#">2.3主存储器的技术指标</a></li><li role="presentation" ><a onclick="loadRight(2.4)" href="#">2.4 SRAM 存储器</a></li><li role="presentation" ><a onclick="loadRight(2.5)" href="#">2.5 DRAM 存储器</a></li><li role="presentation" ><a onclick="loadRight(2.6)" href="#">2.6存储器容量的扩充</a></li><li role="presentation"><a onclick="loadRight(2.7)"  href="#">2.7只读存储器 ROM</a></li><li role="presentation" ><a  onclick="loadRight(2.8)" href="#">2.8并行存储器</a></li><li role="presentation" ><a onclick="loadRight(2.9)"  href="#">2.9 cache基本原理</a></li><li role="presentation" ><a onclick="loadRight(2.10)"  href="#">2.10 cache与主存的地址映射</a></li><li role="presentation" ><a  onclick="loadRight(2.11)" href="#">2.11替换算法</a></li><li role="presentation"><a  onclick="loadRight(2.12)" href="#">2.12 cache的写操作策略</a></li><li role="presentation"><a  onclick="loadRight(3)" href="#">第三章 指令系统</a></li><li role="presentation" ><a onclick="loadRight(3.1)"  href="#">3.1指令系统</a></li><li role="presentation" ><a onclick="loadRight(3.2)"  href="#">3.2指令格式</a></li><li role="presentation" ><a  onclick="loadRight(3.3)" href="#">3.3操作数类型</a></li><li role="presentation" ><a  onclick="loadRight(3.4)" href="#">3.4寻址方式</a></li><li role="presentation" ><a  onclick="loadRight(3.5)" href="#">3.5指令的分类</a></li><li role="presentation" ><a onclick="loadRight(3.6)"  href="#">3.6 RISC技术</a></li><li role="presentation" ><a onclick="loadRight(4)"  href="">第四章 中央处理器</a></li><li role="presentation" ><a onclick="loadRight(4.1)"  href="#">4.1 CPU的功能</a></li><li role="presentation" ><a onclick="loadRight(4.2)"  href="#">4.2 CPU的基本组成</a></li><li role="presentation" ><a onclick="loadRight(4.3)"  href="#">4.3 CPU中的主要寄存器</a></li><li role="presentation" ><a onclick="loadRight(4.4)"  href="#">4.4操作控制器的分类</a></li><li role="presentation" ><a onclick="loadRight(4.5)"  href="#">4.5指令周期</a></li><li role="presentation" ><a onclick="loadRight(4.6)"  href="#">4.6时序信号的作用和体制</a></li><li role="presentation" ><a onclick="loadRight(4.7)"  href="#">4.7控制器的控制方式</a></li><li role="presentation" ><a onclick="loadRight(4.8)"  href="#">4.8微程序控制原理</a></li><li role="presentation" ><a onclick="loadRight(4.9)"  href="#">4.9微命令的编码方法</a></li><li role="presentation" ><a onclick="loadRight(4.10)"  href="#">4.10微指令格式</a></li><li role="presentation" ><a onclick="loadRight(5)"  href="#">第五章 总线系统</a></li><li role="presentation" ><a onclick="loadRight(5.1)"  href="#">5.1总线的概念</a></li><li role="presentation" ><a onclick="loadRight(5.2)"  href="#">5.2总线的分类</a></li><li role="presentation"><a onclick="loadRight(5.3)"  href="#">5.3总线性能指标</a></li><li role="presentation" ><a onclick="loadRight(5.4)"  href="#">5.4总线上信息传送方式</a></li><li role="presentation"><a onclick="loadRight(5.5)"  href="#">5.5总线接口</a></li><li role="presentation" ><a onclick="loadRight(5.6)"  href="#">5.6总线的定时</a></li><li role="presentation" ><a onclick="loadRight(5.7)"  href="#">5.7 PCI总线</a></li><li role="presentation" ><a onclick="loadRight(6)"  href="#">第六章 外围设备</a></li><li role="presentation" ><a onclick="loadRight(6.1)"  href="#">6.1外围设备的定义和分类</a></li><li role="presentation" ><a onclick="loadRight(6.2)"  href="#">6.2磁记录原理</a></li><li role="presentation" ><a onclick="loadRight(6.3)"  href="#">6.3磁表面存储器的读写原理</a></li><li role="presentation" ><a onclick="loadRight(6.4)"  href="#">6.4磁盘的组成和分类</a></li><li role="presentation" ><a onclick="loadRight(6.5)"  href="#">6.5磁盘上信息的分布</a></li><li role="presentation" ><a onclick="loadRight(6.6)"  href="#">6.6磁盘存储器的技术指标</a></li><li role="presentation" ><a onclick="loadRight(6.7)"  href="#">6.7磁盘cache</a></li><li role="presentation" ><a onclick="loadRight(6.8)"  href="#">6.8磁盘阵列RAID</a></li><li role="presentation" ><a onclick="loadRight(7)"  href="#">第七章 输入输出系统</a></li><li role="presentation" ><a onclick="loadRight(7.1)"  href="#">7.1外围设备的速度分级</a></li><li role="presentation" ><a onclick="loadRight(7.2)"  href="#">7.2 I/O和主机信息交换方式</a></li><li role="presentation"><a onclick="loadRight(7.3)"  href="#">7.3程序查询方式</a></li><li role="presentation"><a onclick="loadRight(7.4)"  href="#">7.4中断的概念</a></li><li role="presentation"><a onclick="loadRight(7.5)"  href="#">7.5程序中断方式的原理</a></li><li role="presentation" ><a onclick="loadRight(7.6)"  href="#">7.6中断处理过程中的几个问题</a></li><li role="presentation" ><a onclick="loadRight(7.7)"  href="#">7.7 DMA的基本概念</a></li><li role="presentation" ><a onclick="loadRight(7.8)"  href="#">7.8 DMA能执行的一些操作</a></li><li role="presentation" ><a onclick="loadRight(7.9)"  href="#">7.9 DMA传送方式</a></li><li role="presentation" ><a onclick="loadRight(7.10)"  href="#">7.10 DMA数据传送过程</a></li><li role="presentation" ><a onclick="loadRight(7.11)"  href="#">7.11 CPU对通道的管理</a></li><li role="presentation" ><a onclick="loadRight(7.12)"  href="#">7.12通道的类型</a></li><li role="presentation" ><a onclick="loadRight(8)"  href="#">第八章 操作系统支持</a></li><li role="presentation" ><a onclick="loadRight(8.1)"  href="#">8.1虚拟存储器的概念</a></li><li role="presentation" ><a onclick="loadRight(8.2)"  href="#">8.2虚存的访问过程</a></li><li role="presentation" ><a onclick="loadRight(8.3)"  href="#">8.3几种虚拟存储器</a></li><li role="presentation"><a onclick="loadRight(8.4)"  href="#">8.4页式虚拟存储器</a></li><li role="presentation" ><a onclick="loadRight(8.5)"  href="#">8.5段式虚拟存储器</a></li><li role="presentation" ><a onclick="loadRight(8.6)"  href="#">8.6段页式虚拟存储器</a></li></ul>
</body>
</html>

sectionRight.jsp（复制部分）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>章节知识点</title>
</head>
<body><div><div id="1"><h1>第一章 计算机系统概论</h1><div id="1.1"><h3>电子数字计算机的分类</h3><p style="font-size: 15px">通用计算机 （超级计算机、 大型机、 服务器、 工作站、 微型机和单片机） 和专用计算机。</p></div><br><div id="1.2"><h3>数字计算机的五大部件及各自主要功能</h3><p style="font-size: 15px">五大部件：存储器、运算器、控制器、输入设备、输出设备。<br>存储器主要功能：保存原始数据和解题步骤。<br>运算器主要功能：进行算术、逻辑运算。<br>控制器主要功能：从内存中取出解题步骤 (程序 )分析，执行操作。<br>输入设备主要功能： 把人们所熟悉的某种信息形式变换为机器内部所能接收和识别的二进制信息形式。<br>输出设备主要功能： 把计算机处理的结果变换为人或其他机器所能接收和识别的信息形式。</p></div><br><div id="1.3"><h3>计算机软件</h3><p style="font-size: 15px">系统程序——用来管理整个计算机系统<br>应用程序——按任务需要编制成的各种程序</p></div></div>
.......................

html/jsp实现点击左侧目录/菜单，右侧加载不同效果的功能相关推荐

区块链商品溯源系统左侧导航栏+右侧加载页面ajax html
纯前端页面,项目应该部署到服务器上,ajax跨域问题得到解决,无聊的毕业前实习. 网页是参考网上的原型设计效果: 代码: html <!DOCTYPE html> <html la ...
ajax实现简单的点击左侧菜单，右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 图片.png 原 ...
Android商城开发----点击左侧分类列表右侧更新对应列表内容
Android商城开发----点击左侧分类列表右侧更新对应列表内容目录 Android商城开发----点击左侧分类列表右侧更新对应列表内容一.首先说布局: 二.主要说一下,布局完成后实现点击左侧类 ...
[iOS] 引用外部静态库时，(类别)目录方法无法加载问题
[iOS] 引用外部静态库时,目录方法无法加载问题这个 bug 在 xcode 4.3 以下会出现,4.3 以后已经修正了. 解决方法为:找到 target 的图标,更改其 Other Linker ...
点击按钮重新加载ajax,Jquery AJAX点击链接，然后重新加载页面
我审查了其他帖子和一些帮助我,但因为我不精通JQuery或AJAX,我想确保我正在做我需要正确的.Jquery AJAX点击链接,然后重新加载页面在我的主页(基本URL)上,我有2个不同的输出,基于 ...
前端vue里面点击加载更多_js实现『加载更多』功能实例
DEMO : 滚动加载示例关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
同样的环境同样的安装目录arx提示加载不上
本文迁移自本人网易博客,写于2015年4月15日,同样的环境同样的安装目录arx提示加载不上 - lysygyy的日志 - 网易博客 (163.com) 不知道什么原因,自定义的arx跑到了autoc ...
easyui左侧导航菜单右侧载入百度地图项目框架
代码下载 http://pan.baidu.com/s/1cDht7K 一个左侧是导航菜单,右侧是百度地图的应用: 一左侧菜单使用jquery easyui框架:网上下的资源:运行后如下: 二修 ...
伟景行citymaker-----01.javascript打开本地模型CEP，加载目录树，加载要素类
以下所有代码基于 CityMaker_IE_Plugin_vConnect8.0.171127.exe 版本该版本只能使用IE打开,建议使用IE11 下载代码案例 1.打开cep模型代码 1.1 ...

html/jsp实现点击左侧目录/菜单，右侧加载不同效果的功能

效果展示

所用技术：BootStrap,JQuery,html/jsp

页面：

section.jsp

sectionLeft.jsp

sectionRight.jsp（复制部分）

html/jsp实现点击左侧目录/菜单，右侧加载不同效果的功能相关推荐

最新文章

热门文章