测试界面test.html
$(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("加载失败,请重试!");
}
});
});
});
1.html
hello word!
点击链接1,页面阻止了网站的跳转 点击链接2 左边导航栏右边内容
content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
/*兼容浏览器*/
* {
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;
}
$(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("加载失败,请重试!");
}
});
});
});
附带了两个界面,这里就可以实现页面不跳转情况下,右边显示内容了 登陆界面代码请前往 我前面写的文章查看 https://blog.csdn.net/THREEFUCT/article/details/126175671?spm=1001.2014.3001.5501
相关阅读
发表评论