码迷,mamicode.com
首页 > 其他好文 > 详细

导航栏切换

时间:2020-06-23 15:15:17      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:sibling   find   福建   container   mil   class   hover   包括   on()   

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和内容

 

导航栏切换

标签:sibling   find   福建   container   mil   class   hover   包括   on()   

原文地址:https://www.cnblogs.com/tangsujuan/p/13181940.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!