导航栏切换
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和内容
以上是关于导航栏切换的主要内容,如果未能解决你的问题,请参考以下文章
带有片段和底部导航栏的 Android FloatingActionButton