标签：margin add children 微软 index 推荐 line hid cursor
一个简单的导航栏切换效果的制作,主要通过索引值和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)
标签：margin add children 微软 index 推荐 line hid cursor
原文地址：http://www.cnblogs.com/ygtq-island/p/6391498.html
