jQuery 选项卡

浏览数：43 / 时间：2015年06月09日

<!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>