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;
}
原文：https://blog.51cto.com/u_15182994/2736375