点击左侧菜单在右侧弹出相应的内容

最新推荐文章于 2024-05-25 11:51:31 发布

Brisk Walking

最新推荐文章于 2024-05-25 11:51:31 发布

阅读量2.6k

点赞数 7

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/QQ1602288425/article/details/129023849

版权

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)");
    });
    
}

最后我们看看效果图吧!