<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 选项卡</title>
<style>
html,body,div,p,ul,li{
padding: 0px; margin: 0px;
}
.wrap{
font:16px/1.8 "微软雅黑";width: 232px; margin: 50px auto;
}
.title{
width: 230px; height: 32px; font-size: 14px; line-height: 32px;
border: 1px solid #dbdee1; background: #f1f1f1;
}
.title li{
float: left; display: inline; overflow: hidden; border:1px solid #dbdee1;
padding: 0 12px; margin-left: -1px; cursor:pointer; margin-top: -1px;
}
.title li.icur{
border-top: 3px solid #ff8400;
border-left: 1px solid #dbdee1;
border-right: 1px solid #dbdee1;
border-bottom: 1px solid #fff;
background-color: #fff;
height: 30px;
line-height: 29px;
color:#ff8400;
}
.boxList{
font-size: 14px; width: 230px;height: 135px; overflow: hidden;
border:1px solid #dbdee1; border-top: none;
}
.boxList ul{
list-style: none;width: 220px; padding: 5px;
}
a{
text-decoration: none; color: #333; text-shadow:0px 0px 1px #dbdee1;
}
a:hover{
color: #ff8400;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="title">
<li class="icur">视频</li>
<li>综艺</li>
<li>秒拍</li>
</ul>
<div class="boxList">
<ul>
<li><a href="">老人乘公交无人让座拦车叫嚣</a></li>
<li><a href="">汕头虐童细节 我移交日毒贩</a></li>
<li><a href="">男子向虎求饶 情侣高速亲热</a></li>
<li><a href="">少妇遭劫裸死 地铁女遭摸臀</a></li>
<li><a href="">霆锋欲与王菲度假 柏芝卖房</a></li>
</ul>
<ul>
<li><a href="">女神的新衣：陈伟霆倒立耍酷</a></li>
<li><a href="">锋味：霆锋做小吃破世界纪录</a></li>
<li><a href="">爸爸去哪：Kimi回归成小队长</a></li>
<li><a href="">第一美差：20强三亚华丽出炉</a></li>
<li><a href="">十二星座明星犯错后作何反应</a></li>
</ul>
<ul>
<li><a href="">神剧十万个冷笑话爆笑来袭</a></li>
<li><a href="">叶诗文热身状态佳目标卫冕</a></li>
<li><a href="">EXO Chen助阵张力尹演唱会</a></li>
<li><a href="">神同步当斗地主遇到节奏大师</a></li>
<li><a href="">如此求婚小伙儿祝你分手快乐</a></li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
/*
find()
方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选
on()
绑定事件的一个方法
addClass()
方法向被选元素添加一个或多个类,该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
removeClass()
方法从被选元素移除一个或多个类,如果没有规定参数，则该方法将从被选元素中删除所有类
siblings()
获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的
eq()
eq() 选择器选取带有指定 index 值的元素,index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）
index()
方法返回指定元素相对于其他指定元素的 index 位置，如果未找到元素，index() 将返回 -1
show()
如果被选元素已被隐藏，则显示这些元素
hide()
如果被选的元素已被显示，则隐藏该元素
*/
$(function(){
$('.title').find('li').on('mouseover',function(){
$(this).addClass('icur').siblings().removeClass('icur');
$('.boxList').find('ul').eq($(this).index()).show().siblings().hide();
});
})
</script>
</body>
</html>
