导航栏切换

Posted 2020-12-12 tangsujuan

1.nav一块，内容一块

   // 第一个tab切换
        $(‘.QQnav li‘).click(function(){
            $(this).addClass(‘on‘).siblings().removeClass(‘on‘).parents(‘ul‘).next().find(‘.QQ‘).eq($(this).index()).addClass(‘on‘).siblings().removeClass(‘on‘);
        })
//方法二：

 $(‘.QQnav>li‘).hover(function () {

            // console.log("click");

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

            console.log($(this));

            var index = $(this).index();

            $(".container>div").eq(index).show().siblings().hide();

        });

 

  <div class="QQtop">
            <!-- nav -->
            <ul class="QQnav">
                <li class="on">福建事业单位</li>
                <li>福建公务员</li>
                <li>国家公务员</li>
                
            </ul>
            <div class=‘container‘>
                <!-- 福建事业单位 -->
                <div class="QQ on">
                    <div >
                        <ul>
                            <li>
                                <span>福建事业单位考试</span>
                                <font>701387105</font>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 福建公务员 -->
                <div class="QQ ">
                    <div >
                        <ul>
                            <li>
                                <span>2020省考交流群</span>
                                <font>558995972</font>
                            </li>
                          
                        </ul>
                    </div>
                </div>
                <!-- 国家公务员 -->
                <div class="QQ ">
                    <div >
                        <ul>
                            <li>
                                <span>福清公务员事业单位考试交流群</span>
                                <font>109316401</font>
                            </li>
                        
                        </ul>
                    </div>
                </div>
              
           
                    </div>
                </div>
            </div>

 

2.div里面包括nav和内容