jq实现tab栏切换

JS

$(window).ready(function() {
        // 让第一个标题添加类，第一个模块内容显示；
        $('.nav').find('li:first').addClass('current');
        $('.box_body').find('li:first').show();

        
        $('.nav li').mouseover(function() {
            // 获取当前li索引号
            var index = $(this).index();
            console.log(index);

            // 鼠标经过标题添加类，显示对应内容,其他隐藏；
            $(this).addClass('current').siblings('li').removeClass('current');
            $('.box_body li').eq(index).show().siblings('.box_body li').hide();
        })

    })

CSS

*{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box {
            width: 1000px;
            margin: 100px auto;
        } 
        .box .nav {
            height: 40px;
            line-height: 40px;
            width: 100%;
            background-color: #eee;
        }
        .nav li {
            float: left;
            width: 120px;
            text-align: center;
            font-size: 18px;
            color: #333;
            cursor: pointer;
        }
        .nav .current {
            background-color: brown;
            color: #fff;
        }
        .box_body>li {
            display: none;
            margin: 10px;
        }

HTML

<div class="box">
        <ul class="nav">
            <li>手机类目</li>
            <li>电脑类目</li>
            <li>空调类目</li>
        </ul>
        <ol class="box_body">
            <li>手机模块</li>
            <li>电脑模块</li>
            <li>空调模块</li>
        </ol>
    </div>