首页 > 其他 > 详细

导航栏切换

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

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

 

导航栏切换

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!