技術標籤：前端JSjavascript

css程式碼

 <style>
        *{
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }
        #ul{
            width: 500px;
            display: flex;
            border: 1px solid orange;
        }
        #ul{
            justify-content:
 
 space-around;
        }
        #ul>li{
            width: 100%;
            border: 1px solid orange;
            text-align: center;
			cursor: pointer;
        }
        .active{
            background: orange;
        }
        #div>div{
            width: 500px;
            height: 200px;
			text-
 
align:center;
			line-height:200px;
            border: 1px solid orange;
            display: none;
        }
        #div>.show{
            display: block;
        }  
    </style>

//引入jquery

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

html程式碼

<ul id="ul">
        <li class="active">手機</li>
        <li>電腦</li>
        <li>空調</li>
    </ul>

    <div id="div">
        <div class="show">小米-華為</div>
        <div>聯想-華碩-巨集碁</div>
        <div>海爾-格力-美的</div>
    </div>

js程式碼

<script>
        // index() 獲取下標
        // siblings() 所有同輩元素
        // eq(index)  獲取指定下標的元素
        $("#ul>li").on("click",function(){
           var index= $(this).index();

        //    $(this).addClass("active"); // 當前點選dom 新增 class --active
        //   $(this).siblings().removeClass("active");// 其他的兄弟元素 移除  class --active

            $(this).addClass("active").siblings().removeClass("active");

            $("#div>div").eq(index).addClass("show").siblings().removeClass("show")
        })

    </script>