Severlet跳转JSP，切换div

2021-07-29 14:31:08

一、前言：(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;
}

Severlet跳转JSP，切换div

码农公寓

二、代码实现

相关文章