JS代码实现选项卡切换效果

• CSS代码：

*{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        #box{
            width: 300px;
            border: 1px solid #ccc;
            margin: 30px;
        }
        #box ul li{
            float: left;
            width: 100px;
            padding: 10px 0;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }
        .active{
            background: #ccc;
        }
        /* 隐藏盒子 */
        .content div{
            display: none;
            height: 300px;
        }
        /* 选中第一个盒子，让它展示出来（只有第一个盒子显示出来） */
        .content div:nth-child(1){
            display: block;
        }

• body代码：

<div id="box">
        <ul>
            <li class="active">首页</li>
            <li>图书</li>
            <li>热点</li>
        </ul>
        <div class="content">
            <div>首页内容</div>
            <div>图书内容</div>
            <div>热点内容</div>
        </div>
    </div>

• JS代码：

$(function(){
            // 循环遍历方法  =》【 each() 】
            $("#box li").each(function(index){
                $(this).mouseover(function(){
                    // 先把前面的盒子都隐藏和样式都清空  =>相当于[循环]
                    $("#box li").each(function(i){
                        // 移除类名
                        $(this).removeClass("active");
                        // 隐藏盒子
                        $(".content div").eq(i).hide();
                    });
                    // 当鼠标移入第几号时加一个样式名
                    $(this).addClass("active");
                    // 让对应序号的盒子出来   eq()
                    $(".content div").eq(index).show();
                });
            });
            
        });