Severlet跳转JSP，切换div

最新推荐文章于 2021-06-02 17:39:40 发布

叁Mar.

最新推荐文章于 2021-06-02 17:39:40 发布

阅读量554

点赞数

分类专栏： UI 文章标签： servlet jsp jquery

本文链接：https://blog.csdn.net/m0_50519965/article/details/113746572

版权

UI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用Java Servlet和jQuery实现页面间的跳转并定位到指定内容。通过Servlet处理请求，将跳转目标传递到JSP页面，再利用jQuery动态切换div内容，展示了从'index.jsp'到'jump.jsp'的平滑过渡，并根据用户选择高亮显示相应导航项和内容。

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

一、前言：(Severlet)实现一页面跳转至下一页面指定位置(div)，以及(jq)实现div的切换功能，非常简单，且一目了然。如图所示：

在这里插入图片描述

二、代码实现

index.jsp部分

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--允许使用el表达式--%>
<%@ page isELIgnored="false" %>
<%--提前导入jstl依赖包，然后给定标签名c--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Index</title>
<style>
   body{
       background-color: rgb(72, 121, 111);
   }
   .index{
       width: 180px;
       margin-top: 4.5%;
       margin-left: 10%;
       text-align: center;
       background-color: rgb(241, 241, 241);
       box-shadow: 0.6px 0.6px 4px 0.8px rgba(199, 199, 199, 0.349);
       border-radius: 3px;
   }
   .index>a{
       display: block;
       text-decoration: none;
       font-size: 1.2vmax;
       font-family: 楷体;
       font-weight: 500;
       color: rgb(31, 31, 31);
       letter-spacing: 0.125vmax;
       width: 100%;
       padding: 12px 0;
       transition: all 0.1s linear;
   }

   .index>a:hover{
       background-color: rgba(199, 199, 199, 0.45);
   }
</style>
</head>
<body>
<div>
<div class="index">
<%--        利用set，写入下列数组--%>
   <c:set value="西游记,水浒传,红楼梦,三国演义" var="arrStr"/>
<%--        利用foreach循环赋值--%>
   <c:forEach items="${arrStr}" var="str">
       <a href="jump.do?it=${str}">${str}</a>
   </c:forEach>
</div>
</div>
</body>
</html>

JumpServlet.java的servlet

package com.hjc.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/jump.do")

public class JumpServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数名为it的值
        String it = request.getParameter("it");
        //此顺序与两个关联页面的顺序相对应，都是一一对应
        String []arrStr = {"西游记","水浒传","红楼梦","三国演义"};
        for (int i = 0;i < arrStr.length;i++){
            if (arrStr[i].equals(it)){
                //将所对应的下标赋给it
                it = String.valueOf(i);
                break;
            }
        }
        //将it存入四大作用域之一的request中，请求一次(一次性)，占用内存空间少，其它几大作用域各有其利弊
        request.setAttribute("it",it);
        //
        request.getRequestDispatcher("jump.jsp").forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //转接到doGet方法
        doGet(req, resp);
    }
}

jump.jsp部分

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--配置使得可以使用el表达式--%>
<%@ page isELIgnored="false" %>
<html>
<head>
    <link rel="stylesheet" href="css/jump.css" type="text/css">
    <%--    首先导入jQuery包--%>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/jump.js"></script>
    <title>Jump</title>
    <script>
        $(document).ready(function(){
            var navStr = $(".nav_bar").children('span');
            var divShow = $(".content").children('.zs');
            if (${it!=null}){
                $(navStr[parseInt(${it})]).addClass('nav_barFirst').siblings('span').removeClass('nav_barFirst');
                // 索引对应div块显示
                $(divShow[parseInt(${it})]).show();
                //其他隐藏
                $(divShow[parseInt(${it})]).siblings('.zs').hide();
            }
        });
    </script>
</head>
<body>
<div class="box">
    <div class="nav_bar">
        <span>西游记</span>
        <span>水浒传</span>
        <span>红楼梦</span>
        <span>三国演义</span>
    </div>
    <div class="content">
        <div class="zs" style="background-color: antiquewhite">
            <span>
                西游记<br>
                ————作者：吴承恩
            </span>
        </div>
        <div class="zs" style="background-color: #6cba86">
            <span>
                水浒传<br>
                ————作者：施耐庵
            </span>
        </div>
        <div class="zs" style="background-color: #4f9590">
            <span>
                红楼梦<br>
                ————作者：曹雪芹
            </span>
        </div>
        <div class="zs" style="background-color: #7e74a1">
            <span>
                三国演义<br>
                ————作者：罗贯中
            </span>
        </div>
    </div>
</div>
</body>
</html>

jump.js部分

$(function(){
    //获取点击事件的对象
    $(".nav_bar span").click(function(){
        //获取显示或隐藏的对象
        var divShow = $(".content").children('.zs');
        //判断当前对象是否被选中
        if(!$(this).hasClass('nav_barFirst')){
            //获取当前索引
            var index = $(this).index();
            //选中一个其他被移除样式,sibling兄弟
            $(this).addClass('nav_barFirst').siblings('span').removeClass('nav_barFirst');
            //索引对应div块显示
            $(divShow[index]).show();
            //其他隐藏
            $(divShow[index]).siblings('.zs').hide();
        }
    });
});

jump.css部分

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: rgb(249, 248, 248);
}

.box{
    width: 78%;
    margin: 4.5% auto;
}

.nav_bar{
    position: absolute;
    width: 13%;
    margin-right: 5px;
    text-align: center;
    padding: 10px 0;
    font-size: 1.2vmax;
    font-family: 楷体;
    font-weight: 500;
    letter-spacing: 0.125vmax;
    color: rgb(31, 31, 31);
    background-color: rgb(253, 253, 253);
    box-shadow: 0.6px 0.6px 4px 0.8px rgba(199, 199, 199, 0.349);
    border-radius: 3px;
}

.nav_bar>span{
    display: block;
    width: 100%;
    padding: 12px 0;
    cursor: pointer;
    transition: all 0.1s linear;
}

.nav_bar span:hover,.nav_barFirst{
    background-color: rgba(199, 199, 199, 0.45);
}

.content{
    display: block;
    position: relative;
    float: right;
    width: 83%;
    height: 567px;
}

.content>.zs{
    display: none;
    width: 100%;
    height: 100%;
    font-family: 楷体;
    font-weight: 400;
    text-align: center;
    font-size: 25px;
    padding-top: 25px;
}