其他分享
首页 > 其他分享> > Severlet跳转JSP，切换div

Severlet跳转JSP，切换div

作者：互联网

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

在这里插入图片描述

二、代码实现

  1. 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>

  1. 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);
    }}

  2. 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>

  3. 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();
        }
    });});

  4. 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;}

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

标签：index,199,Severlet,nav,跳转,span,div,font
来源： https://blog.51cto.com/u_15182994/2736220