左边多级导航切换右边的main

最新推荐文章于 2022-02-24 15:37:39 发布

泡泡菌

最新推荐文章于 2022-02-24 15:37:39 发布

阅读量566

点赞数

分类专栏： CSS javascrip 文章标签： html CSS javascript

本文链接：https://blog.csdn.net/Junpaopao/article/details/78130044

版权

javascrip 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../common/jquery-3.1.1.js" type="text/javascript"></script>
    <title>左边二级导航切换右边的main</title>
</head>
<style>
    ul, li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .left-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        overflow: auto;
        background: #2b3541;
        width: 200px;
        text-align: center;
    }

    .zhu {
        height: 40px;
        line-height: 40px;
        color: white;
    }

    .ci {
        background: #1A2226;
        transition: all .3s;
        display: none;
    }

    .block {
        display: block;
    }

    li {
        height: 40px;
        line-height: 40px;
    }

    .main {
        position: absolute;
        top: 0;
        left: 200px;
        /*width: 100%;*/
        background: #2aabd2;
    }

    .main .main-right {
        display: none;
        width: 800px;
        height: 500px;
    }

    .main .show {
        display: block;
    }

    .selected {
        background: #2C3B41;
    }
</style>
<body>
<div class="left-nav">
    <div class="nav">
        <div class="zhu">主一</div>
        <ul class="ci">
            <li class="selected" data-name="0">次一</li>
            <li data-name="1">次二</li>
            <li data-name="2">次三</li>
        </ul>
    </div>
    <div class="nav">
        <div class="zhu">主一</div>
        <ul class="ci">
            <li data-name="3">次一</li>
            <li data-name="4">次二</li>
            <li data-name="5">次三</li>
        </ul>
    </div>
    <div class="nav">
        <div class="zhu">主一</div>
        <ul class="ci">
            <li data-name="6">次一</li>
            <li data-name="7">次二</li>
            <li data-name="8">次三</li>
        </ul>
    </div>
    <div class="nav">
        <div class="zhu">主一</div>
        <ul class="ci">
            <li data-name="9">次一</li>
            <li data-name="10">次二</li>
            <li data-name="11">次三</li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="main-right show">1</div>
    <div class="main-right">2</div>
    <div class="main-right">3</div>

    <div class="main-right">4</div>
    <div class="main-right">5</div>
    <div class="main-right">6</div>

    <div class="main-right">7</div>
    <div class="main-right">8</div>
    <div class="main-right">9</div>

    <div class="main-right">10</div>
    <div class="main-right">11</div>
    <div class="main-right">12</div>

</div>
</body>
<script>
    $(function () {
        $(".left-nav").on("click", ".zhu", function () {
            $(this).siblings(".ci").toggleClass("block")
        });
        $(".left-nav").on("click", "li", function () {
            $(".left-nav li").removeClass("selected");
            $(this).addClass("selected");
            var index=$(this).data('name');
            $(".main>.main-right").eq(index).siblings().removeClass("show");
            $(".main>.main-right").eq(index).addClass("show");
        });
    });
</script>
</html>