导航栏切换

Posted tangsujuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了导航栏切换相关的知识,希望对你有一定的参考价值。

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

 

以上是关于导航栏切换的主要内容,如果未能解决你的问题,请参考以下文章

小程序--导航栏切换(tab切换)

禁用导航抽屉,在片段中切换主页按钮/向上指示器

带有片段和底部导航栏的 Android FloatingActionButton

如何在切换片段时停止 AsyncTask?

如何在更改全屏/上方导航时使用导航组件 navhostfragment

通过底部导航栏更改片段时恢复片段状态