测试界面test.html
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
<!--远程调用-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--百度-->
<script src="http://libs.baidu.com/jquery/3.6.0/jquery.min.js"></script>
<!--boot-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--flask引用,要求建立sattic文件,就是如下部署-->
<script src="{{ url_for('static', filename='codejs/jquery-3.6.0.min.js') }}"></script>
<!--本地引用-->
<script src="codejs/jquery-3.6.0.min.js"></script>
<script>javascript">
$(document).ready(function() {
// 当点击链接时
$("a.special").click(function(event) {
event.preventDefault(); // 阻止默认跳转行为
var href = $(this).attr("href"); // 获取链接地址
$.ajax({
url: href, // 发送异步请求
success: function(response) {
$("#content").html(response); // 在页面中显示返回内容
},
error: function() {
alert("加载失败,请重试!");
}
});
});
});
</script>
</head>
<body>
<nav>
<ul>
<li><a href="1.html" class="special">1.html</a></li>
<li><a href="1.html">2.html</a></li>
</ul>
</nav>
<div class="content-right" id="content"></div>
</body>
</html>
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello word!
</body>
</html>
点击链接1,页面阻止了网站的跳转
点击链接2
左边导航栏右边内容
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Test</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
/*兼容浏览器*/
* {
margin: 0;
padding: 0;
}
.content {
width: 100%;
height: 100%;
}
.content-left {
width: 20%;
height: 100%;
height: 600px;
background-color: #6495ED;
float: left;
}
.content-right {
width: 80%;
height: 100%;
height: 600px;
background-color: #00000;
float: left;
}
.left-title {
width: 100%;
height: 50px;
}
.left-title > a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
/*去掉a下默认下划线*/
text-decoration: none;
}
/*分割线*/
.seg {
height: 1px;
width: 100%;
background-color: #FF69B4;
}
.nav {
/*上下5,左右0*/
margin: 5px 0;
}
/*菜单项主标题*/
.nav-title {
height: 40px;
width: 100%;
color: white;
text-align: center;
line-height: 40px;
cursor: pointer;
font-size: 10px;
}
/*菜单项主标题*/
.nav-title2 > a{
display: block;
height: 40px;
width: 100%;
color: white;
text-decoration: none;
text-align: center;
line-height: 40px;
cursor: pointer;
font-size: 10px;
}
.nav-menu{
line-height: 20px;
display: block;
height: 10%;
width: 100%;
color: white;
text-decoration: none;
text-align: center;
line-height: 20px;
cursor: pointer;
font-size: 10px;
}
/*子标题内容区*/
.nav-content {
width: 100%;
height: 100%;
background-color: #00FFFF;
}
/*子标题的样式*/
.nav-content > a {
display: block;
width: 100%;
height: 30px;
color: #CCCCCC;
text-decoration: none;
text-align: center;
line-height: 30px;
font-size: 10px;
}
/*子标题鼠标经过时的改变颜色*/
.nav-content > a:hover {
color: #00BFFF;
background-color: #ADFF2F;
}
/*内容区*/
.content-right{
font-size: 10px;
line-height: 10px;
text-align: center;
}
</style>
<script>javascript">
$(document).ready(function() {
// 当点击链接时
$("a.special").click(function(event) {
event.preventDefault(); // 阻止默认跳转行为
var href = $(this).attr("href"); // 获取链接地址
$.ajax({
url: href, // 发送异步请求
success: function(response) {
$("#content").html(response); // 在页面中显示返回内容
},
error: function() {
alert("加载失败,请重试!");
}
});
});
});
</script>
</head>
<body>
<div class = "content">
<!--左侧导航栏-->
<div class = "content-left">
<div class = "left-title">
<div class = "nav-title">左边导航栏右边内容区域</div>
</div>
<!--水平线-->
<div class = "seg"></div>
<!--菜单栏导航-->
<div class = "nav">
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">第一个标题</div>
<!--子标题-->
<div class = "nav-content">
<a href = "1.html" class="special">1</a>
</div>
</div>
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">第二个标题</div>
<!--子标题-->
<div class = "nav-content">
<a href = "2.html" class="special">1</a>
</div>
</div>
</div>
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title2"><a href = "1.html" class="special">新的话题</a></div>
<!--子标题-->
</div>
<!--水平线-->
<div class = "seg"></div>
</div>
<!--右侧内容区-->
<div class = "content-right" id = "content">
</div>
</div>
</body>
</html>
附带了两个界面,这里就可以实现页面不跳转情况下,右边显示内容了
登陆界面代码请前往
我前面写的文章查看
https://blog.csdn.net/THREEFUCT/article/details/126175671?spm=1001.2014.3001.5501