首页 > 代码库 > jquery实现简单的导航栏切换效果($(this).index)
jquery实现简单的导航栏切换效果($(this).index)
一个简单的导航栏切换效果的制作,主要通过索引值和jquery的siblings()来实现
html代码:
<div class="container"> <ul class="top-nav"> <li class="nav">html</li> <li class="nav">css</li> <li class="nav">javascript</li> </ul> <ul class="bottom-content"> <li class=content>html是基础</li> <li style="display: none" class="content">css也是基础</li> <li style="display: none" class="content">javascirpt是进阶</li> </ul> </div>
css代码(自己随便写的样式,大家可以自由发挥):
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
display: inline-block;
}
.container{
width: 240px;
}
.top-nav{
font-size: 0;
}
.nav{
width: 80px;
height: 30px;
line-height: 30px;
font-size: 16px;
font-family: "微软雅黑";
text-align: center;
cursor: pointer;
}
.nav:hover{
background-color: #CC6699;
color:#fff;
}
.content{
width: 240px;
text-align: center;
}
js代码(要记得先引入jquery哦):
$(‘.nav‘).click(function(){
$(this).parent().next().children().eq($(this).index()).show().siblings().hide();
})
//通过$(this)找到点击的DOM元素
//通过parent(),next()这些选择器找到要实现显示隐藏的元素的父元素
//通过children().eq($(this).index())来用索引进行控制,$(this).index()就是你点击元素的索引,只要把元素一一对应就好了
//通过jquery的.show()方法显示对应的元素
//通过.sibling()找到同级的兄弟元素,进行隐藏
tips:你也可以用addClass()和removeClass()给对应的元素加上一个类,实现想要的效果
以上方法对于一般的场景应该足够使用,如果层级关系过于复杂就不推荐使用了
jquery实现简单的导航栏切换效果($(this).index)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。