HTML左右分页更新【搬代码】

html左右分页最新代码
html 复制代码
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        a,
        a:hover,
        a:focus {
            text-decoration: none;
            color: #262626;
        }

        .i-icon {
            display: inline-block;
        }

        .go-back {
            padding-top: 50px;
            text-align: center;
        }

        .window-left.fold {
            overflow: visible !important;
        }

        .window-left {
            position: relative;
            float: left;
            width: 200px;
            height: 100%;
            overflow: hidden;
            background-color: #e8e9ec;
        }

        .window-left.fold {
            overflow: visible !important;
        }

        .window-left .go-back a {
            display: inline-block;
            width: 160px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            border: solid 1px #7e84b1;
            text-align: center;
        }

        .window-left .go-back a .i-icon {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            background-image: url("img/Icon1.png");
            background-size: contain;/*将图片整个显示出来*/
        }

        .window-left.fold .go-back a {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            border: solid 1px #7e84b1;
        }

        .window-left.fold .go-back a .i-icon {
            background-image: url("img/head1.jpg");
            background-size: contain;/*将图片整个显示出来*/
        }

        .window-left .go-back {
            text-align: center;
        }

        .window-left .menu-list {
            padding-top: 20px;
            font-size: 18px;
        }

        .window-left .menu-list ul {
            list-style: none;
            padding: 0;
            margin: 0 auto;
        }

        .window-left .menu-list ul li {
            text-align: left;
            color: #616c82;
        }

        .window-left .menu-list ul li.first-menu {
            position: relative;
            color: #5f78a2;
        }

        .window-left .menu-list>ul>li .i-icon {
            width: 24px;
            height: 24px;
            vertical-align: sub;
            background-image: url("img/icon_word.png");
            background-size: contain;/*将图片整个显示出来*/
        }

        .window-left .menu-list ul li:HOVER>span {
            color: #1c9dff;
            cursor: pointer;
        }

        .window-left .menu-list ul li a {
            display: block;
        }

        .window-left .menu-list ul li.first-menu>a {
            position: relative;
            padding-left: 15px;
            width: 100%;
            line-height: 50px;
            white-space: nowrap;
        }

        .window-left .menu-list ul li.first-menu .hover-tit {
            display: block;
            position: absolute;
            left: 55px;
            top: 13px;
            width: 140px;
        }

        .window-left.fold .menu-list ul li.first-menu .hover-tit {
            display: none;
            width: 180px;
            height: 50px;
            left: 60px;
            line-height: 50px;
            padding-left: 20px;
            background-color: #bfbcbc;
            color: #646567;
            cursor: Default;
        }

        .window-left.fold .menu-list ul li.first-menu:hover {
            background-color: #bfbcbc;
        }

        .window-left.fold .menu-list ul li.first-menu:hover .hover-tit {
            display: block !important;
            top: 0;
        }

        .window-left.fold .menu-list ul li.first-menu:hover ul {
            display: block !important;
            position: absolute;
            width: 180px;
            top: 50px;
            left: 60px;
        }

        .window-left.fold .menu-list ul li.first-menu:hover ul li {
            height: 45px;
            border-top: 1px solid #35395f;
            background-color: #bfbcbc;
        }

        .window-left.fold .menu-list ul li.first-menu:hover ul li a {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .window-left .menu-list ul li.first-menu.active>span {
            color: #1c9dff;
        }

        .window-left .menu-list ul li.first-menu.active ul li.second-menu.current a {
            background-color: #bfbcbc;
        ;
            border-left: 4px solid #101213;
            font-size: 16px;
        }

        .window-left .menu-list ul li.first-menu ul {
            display: none;
        }

        .window-left .menu-list ul li.first-menu ul li.second-menu a {
            padding: 12px 0 12px 55px;
            font-size: 16px;
            color: #28292b;
        }

        .window-left.fold .menu-list ul li.first-menu ul li.second-menu a {
            padding-left: 20px;
            font-size: 16px;
            color: #020e23;
        }

        /*.onlyOne {*/
        /*    background-color: #1c9dff;*/

        /*}*/

        .onlyOne div {
            display: none;
        }

        .onlyOne div.active {
            display: block;
        }
        .red {
            background-color: #7e84b1;
        }
    </style>
</head>

<body>
<div class="window-left">
    <div class="go-back">
        <a href="javascript:;">
            <i class="i-icon"></i>
        </a>
    </div>
    <div class="menu-list">
        <ul>
            <li class="first-menu">
                <a href="javascript:void(0);" onclick="showDiv(1)"><i class="i-icon"></i></a>
                <span class="hover-tit">首页</span>
            </li>
            <li class="first-menu">
                <a href="javascript:;"><i class="i-icon"></i></a>
                <span class="hover-tit">单词模块</span>
                <ul>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(1)">单词记忆</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(2)">随机单词</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(3)">添加单词</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(4)">测试四</a>
                    </li>
                </ul>
            </li>
            <li class="first-menu">
                <a href="javascript:;"><i class="i-icon"></i></a>
                <span class="hover-tit">菜单2</span>
                <ul>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(5)">测试五</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(6)">测试六</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(7)">测试七</a>
                    </li>
                </ul>
            </li>
            <li class="first-menu">
                <a href="javascript:;"><i class="i-icon"></i></a>
                <span class="hover-tit">菜单3</span>
                <ul>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(8)">测试八</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(9)">测试九</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div id="window-right">

    <div class="onlyOne">
<!--        -->
        <div id="div1" class="active">测试一

        </div>
        <div id="div2">

        </div>
        <div id="div3">测试三</div>
        <div id="div4">测试四</div>
        <div id="div5">测试五</div>
        <div id="div6">测试六</div>
        <div id="div7">测试七</div>
        <div id="div8">测试八</div>
        <div id="div9">测试九</div>
        <div id="div10">测试九</div>
    </div>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
    $(document).ready(function() {
        $('.first-menu > a').click(function() {
            $(this).parent().find('ul').slideToggle(500);
        });
    });

    function showDiv(index) {
        //点击菜单跳转div
        $('.onlyOne div').removeClass('active');
         $('#div' + index).addClass('active');
        //点击哪个菜单哪个菜单变颜色，css中添加red
        $('.second-menu a').removeClass('red');
        $('.second-menu a[οnclick="showDiv(' + index + ')"').addClass('red');
    }

    $(function () {
        $('.go-back a').click(function () {
            $('.menu-list .first-menu').find('ul').hide()
            //收起状态
            if ($('.window-left').hasClass('fold')) {
                $('.window-left').animate({ width: '200px' }, 300, 'swing')
                $('.window-left').removeClass('fold')
            } else {
                $('.window-left').animate({ width: '60px' }, 300, 'swing')
                $('.window-left').addClass('fold')
            }
        })
    })

</script>
</html>