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

最新推荐文章于 2023-11-11 09:40:24 发布

旅人杰

最新推荐文章于 2023-11-11 09:40:24 发布

阅读量8k

点赞数 10

文章标签： java bootstrap js

本文链接：https://blog.csdn.net/qq_42554719/article/details/105467253

版权

该博客介绍了如何利用BootStrap、JQuery和HTML/JSP技术实现一个在线学习平台的功能，其中左侧目录的点击会触发右侧页面内容的相应更新，保持左侧目录的稳定性。

摘要由CSDN通过智能技术生成

效果展示

在这里插入图片描述

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

所用技术：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=

最低0.47元/天解锁文章

旅人杰

关注

10
点赞
踩
71

收藏

觉得还不错? 一键收藏
打赏
0
评论
html/jsp实现点击左侧目录/菜单，右侧加载不同效果的功能

效果展示我做的是计算机组成原理在线学习的知识点总结,左侧是目录，点击左侧的目录，右侧会跳转到相应的知识点，左侧不变.所用技术：BootStrap,JQuery,html/jsp页面：1. section.jsp：主页面，引入以下两个副页面2. sectionLeft：主页面左侧侧目录3. sectionRight：主页面右侧的详细内容section.jsp<%@ pag...
复制链接

扫一扫