web局部页面跳转--点击导航栏，导航栏下方会指向一个页面，而导航栏是不改变的。

这是还没有点击的首页，这里显示：Welcome To My World

java中跳转页面的方法 javaweb跳转页面_css

 这是点击了导航栏的“首页”,下方会跳转到另一个页面

java中跳转页面的方法 javaweb跳转页面_css_02

 代码如下：

  • 注意css文件名：share.css
@charset "UTF-8";
body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(150, 201, 54);
}

ul.topnav li {
	float: left;
	}

.box{
      width: 1000px;
            /* 超出部分隐藏 */
      overflow: hidden;
      margin: auto;
      display: flex;
        }
.content{
            width: 1500px;
            height: 600px;
            flex-shrink: 0;
        }
li a {

    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
}
  • 创建file002.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<h1>Welcome To My World</h1>
</body>
</html>

创建file004.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<div style="text-align: center;">
<h1>天宝元年四月从故御道上泰山</h1>
</br>
四月上泰山，石平御道开。</br>
六龙过万壑，涧谷随萦回。</br>
马迹绕碧峰，于今满青苔。</br>
飞流洒绝巘，水急松声哀。</br>
北眺崿嶂奇，倾崖向东摧。</br>
洞门闭石扇，地底兴云雷。</br>
登高望蓬流，想象金银台。</br>
天门一长啸，万里清风来。</br>
玉女四五人，飘颻下九垓。</br>
含笑引素手，遗我流霞杯。</br>
稽首再拜之，自愧非仙才。</br>
旷然小宇宙，弃世何悠哉。</br>
</div>
</body>
</html>
  • 创建NewFile.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>

清晓骑白鹿，直上天门山。</br>
山际逢羽人，方瞳好容颜。</br>
扪萝欲就语，却掩青云关。</br>
遗我鸟迹书，飘然落岩间。</br>
其字乃上古，读之了不闲。</br>
感此三叹息，从师方未还。</br>

</body>
</html>
  • 接下来，就是最重要的一步了--实现页面之间的局部跳转
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="share.css">
<title>Insert title here</title>
<style type="text/css">
ul li a:hover{
            background-color: #fff;
            color: #000;
        }
</style>
</head>

<body>

<!-- 
1.创造锚点链接-a标签
2.创建不同页面的jsp文件
3.将锚点链接与jsp链接
4.链接的时候会出现覆盖的情况，因此使用css标签
box和content设定一样的宽度，留下多余的页面
overflow隐藏多余的界面
 -->




<h1>welcome to supermakter</h1>
<div id="divhead">
<ul class="topnav">
  <li><a href="#div4">主页</a></li>
  <li><a href="#div1">新闻</a></li>
  <li><a href="#div2">联系</a></li>
  <li class="right"><a href="#about">关于</a></li>
</ul>
</div>

<section>
<div class="box">
            <div id="div4" class="content">
            <%@ include file="file002.jsp" %></div>
            <div id="div2" class="content">
            <%@ include file="file004.jsp" %></div>
            <div id="div1" class="content">
            <%@ include file="NewFile003.jsp" %></div>
        </div>
        </section>
</html>