1:首先我们需要一个主要的页面html的代码
<div id="user_left">
<div id="dilatation">
<div id="personal_center">个人中心</div>
</div>
<div id="choice">
<div class="edit" data-id="one"><span class="span c current active_collect" id="w_1" data-src="collect.jsp">我的收藏</span></div>
<div class="edit" data-id="tow"><span class="span c" data-src="attention.jsp" id="w_2">我的关注</span></div>
<div class="edit" data-id="three"><span class="span c" data-src="post.jsp" id="w_3">我的发帖</span></div>
<div class="edit" data-id="four"><span class="span c" data-src="resource.jsp" id="w_4">编辑资料</span></div>
<div class="edit" data-id="five"><span class="span">退出登录</span></div>
</div>
</div>
<div id="user_right">
<div class="user_headline_right">
<div class="user_iron">收藏</div>
</div>
<div id="details_user">
收藏内容
</div>
</div>
2:因为有css的样式,所以我呈现的效果是这个样子,以下面的个人中心开始
3:因为我这里有四个区域需要替换,所以我们需要在创建新的4个html页面,来替换对应的内容区域
<html>
<head>
<title>收藏</title>
</head>
<body>
<div id="sc">收藏</div>
<div id="collect_user">
收藏内容
</div>
</body>
</html>
<html>
<head>
<title>关注</title>
</head>
<body>
<div id="gz">关注</div>
<div id="attention_user">
关注内容
</div>
</body>
</html>
<html>
<head>
<title>发帖</title>
</head>
<body>
<div id="ft">发帖</div>
<div id="post_user">
发帖内容
</div>
</body>
</html>
<html>
<head>
<title>资料</title>
</head>
<body>
<div id="zl">资料</div>
<div id="resource_user">
资料内容
</div>
</body>
</html>
4:以上代码就是相应的每一个html页面的代码
5:最后就是主页html的js的代码
// 左侧栏控制右侧内容
function handoffMain() {
// $("#details_user").load("collect.jsp");
// 这里的urls,url为你需要替换的html页面的路径和某个div的对应id
let urls = ["collect.jsp #collect_user",
"attention.jsp #attention_user",
"post.jsp #post_user",
"resource.jsp #resource_user"]
let url = ["collect.jsp #sc",
"attention.jsp #gz",
"post.jsp #ft",
"resource.jsp #zl"]
let lists = document.getElementsByClassName("c");
for (let i = 0; i < lists.length; i++) {
// let state = {
// index: i,
// name: urls[i]
// }
lists[i].addEventListener("click", function () {
$("#details_user").load(urls[i]);
$(".user_iron").load(url[i]);
/*if (this.innerText === "个人资料"){
requestProfileData();
}*/
// window.history.pushState(state, null, urlFiles[i]);
setTimeout(function () {
let elements = [document.getElementById("w_1"),
document.getElementById("w_2"),
document.getElementById("w_3"),
document.getElementById("w_4")];
elements[i].removeAttribute("style");
}, 200);
});
}
}
//默认收藏变换颜色,这个就是点击改变对应的颜色
function collect() {
$(".span").click(function () {
// $(this).addClass('active').siblings().removeClass('active');collect
$(".span").removeClass("active_collect").removeAttr("style");
$(this).addClass("active_collect").css("color","rgb(0, 195, 255)");
});
}
最后我们看看效果图吧!
如果需要css代码样式的,或者有什么不完整的可以私信我,发完整的代码