选项卡

由于这个案例比较简单，在这里就不去过多的叙述了，我们直接上代码：

<script src="js/jquery-1.12.3.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 300px;
            height: 150px;
            margin: 80px auto;
            border: 1px solid
        }
        
        .container .shangDiv {
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        
        .container .shangDiv ul {
            list-style: none
        }
        
        .container .shangDiv ul li {
            float: left;
            width: 100px;
            background-color: skyblue;
            cursor: pointer;
        }
        
        .container .shangDiv ul .select_li {
            background-color: orange
        }
        
        .container .xiaDiv {
            width: 100%;
            height: 120px;
            text-align: center;
            line-height: 120px;
            background-color: lightgray;
            position: relative;
        }
        
        .container .xiaDiv div {
            position: absolute;
            display: none;
        }
        
        .container .xiaDiv .select_div {
            display: block
        }
    </style>

 <div class="container">
        <div class="shangDiv">
            <ul>
                <li class="select_li">首页</li>
                <li>游戏</li>
                <li>新闻</li>
            </ul>
        </div>
        <div class="xiaDiv">
            <div class="select_div">首页</div>
            <div>王者荣耀</div>
            <div>大家撸起袖子加油干</div>
        </div>
  </div>

 <script>
        // 获得元素
        var $lis = $('.shangDiv li');
        var $divs = $('.xiaDiv div');

        $lis.mouseenter(function() {

            //上边是li部分：把已经有的li类名去掉，然后给当前点击的li加类名
            $(this).addClass('select_li').siblings().removeClass('select_li');

            //下边div部分：把已经有的div类名去掉，然后给当前点击的li对应的div添加类名
            $divs.eq($(this).index()).addClass('select_div').siblings().removeClass('select_div');
        });
</script>