Severlet跳转JSP，切换div

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

二、代码实现

index.jsp部分

<html><head>    <title>Indextitle>    <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">        <c:set value="西游记,水浒传,红楼梦,三国演义" var="arrStr"/>        <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部分

<html><head>    <link rel="stylesheet" href="css/jump.css" type="text/css">        <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>Jumptitle>    <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)实现一页面跳转至下一页面指定位置(div)，以及(jq)实现div的切换功能，非常简单，且一目了然。如图所示：

二、代码实现

三、结语：感谢您的到来！

更多相关文章

随机推荐