技術標籤：javascriptjqueryhtml

簡介：實現點選ul下面的li切換下面的div

00：匯入jQuery

<script src="jquery-3.5.1.js"></script>

一，佈局實現

  <ul id="uls">
        <li class="active">首頁</li>
        <li>分類</li>
        <li>展示</li>
    </ul>
    <
 
div id="box">
        <div class="box_active">這裡是首頁</div>
        <div>這裡是分類</div>
        <div>這裡是展示</div>
    </div>

二，佈局樣式

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .active {
        background:
 
 red;
    }

    #uls {
        width: 50vw;
        display: flex;
        justify-content: space-around;
    }

    #uls>li {
        width: 100%;
        border: 1px solid darkcyan;
        text-align: center;
        cursor: pointer;
    }

    #box {
        width: 50vw;
        height: 200px;
        border:
 
 1px solid black;
    }

    #box>div {
        width: 100%;
        height: 100%;
        display: none;
    }

    #box>.box_active {
        display: block;
    }
</style>

三，js程式碼實現

 <script>
         
        $("#uls>li").click(function () {
            var index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $("#box>div").addClass("box_active").eq(index).siblings().removeClass("box_active");
        })
    </script>

各位兄臺路過點讚了