Severlet跳转JSP,切换div

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

Severlet跳转JSP,切换div

二、代码实现

  1. 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>
    
    
  2. 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);
        }
    }
    
    
  3. 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>
    
    
  4. 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();
            }
        });
    });
    
  5. 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;
    }
    
    

三、结语:感谢您的到来!

上一篇:怎样产生源源不断的被动收入?知识付费创业安排上!


下一篇:centos部署Django项目的前提工作