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