实现拉动右边内容栏左边菜单栏动态变化

Posted 2020-10-12 bai_nian_min_guo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现拉动右边内容栏左边菜单栏动态变化相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位置操作</title>
    <style>
        .aa{
            background-color: palegreen;
            width: 30%;
            float: left;
            position: fixed;
            top: 10px;
            /*left: 20px;*/
        }
        .bb{
            width: 70%;
            float: right;
            background-color: green;
        }
        .cc{
            background-color: #dddddd;
            border-style: solid;
            border-color: palegreen;
            font-size: 30px;
        }
        .dd{
            background-color: aqua;
            height: 2000px;
            border-color: black;
            border-style: dashed;


        }
        .ff{
            background-color: black;
            font-size: 20px;
            color: red;

        }
    </style>
</head>
<body>

    <!--offsect:标签距离屏幕左上角的距离有多远，距离顶部多远，距离左边多远-->
    <!--position:标签距离自己的父标签的距离有多远,距离顶部多远，距离左边多远-->
    <!--heiht:标签的高度,不包括边框-->
    <!--weight:标签的宽度,不包括边框-->
    <div class="aa">
        <div id="cui1" class="cc">第一章</div>
        <div id="cui2" class="cc">第二章</div>
        <div id="cui3" class="cc">第三章</div>
    </div>
    <div class="bb">
        <div class="dd" sb="cui1">内容一</div>
        <div class="dd" sb="cui2">内容二</div>
        <div class="dd" sb="cui3">内容三</div>
    </div>




    <script src="jquery-3.2.1.js"></script>
    <script>
        $(function () {
            window.onscroll = function () {
//            给整个窗口绑定一个滑轮移动的事件，只要滑轮移动就会触发这个事件
                var ws = $(window).scrollTop()
//                这个的意思是滑轮移动的距离
                $(".bb").children().each(function () {
                    var off = $(this).offset()
//                    这个的意思是计算每个标签距离顶部和左边的距离
                    var offtop = off.top
                    h = $(this).height() + offtop
//                    这个的意思是计算标签距离顶部的高度
//                    console.log(ws)
                    if(ws>offtop && ws < h){
                        h = $(this).height() + offtop
                        var x = $(this).attr("sb")
                        var tmp_id = "#" + x
                        $(tmp_id).addClass("ff")
                    }else {
                        h = $(this).height() + offtop
                        var x = $(this).attr("sb")
                        var tmp_id = "#" + x
                        $(tmp_id).removeClass("ff")
                    }
                })
            }
        })

    </script>

</body>
</html>

以上是关于实现拉动右边内容栏左边菜单栏动态变化的主要内容，如果未能解决你的问题，请参考以下文章

css+div实现左边显示菜单右边显示内容

html框架如何实现左边为导航栏,右边为连接页面,代码写出来

在jsp中 frameset到底怎么用啊？当点击左边的菜单连接右边的内容发生变化？

layui如何左侧点击，右侧显示内容？

java 如何实现窗口的左边是导航栏,点击其中一个选项后在窗口右边显示相应的内容

JS_左边栏菜单