<!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 "微软雅黑"; 232px; margin: 50px auto; } .title{ 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; 230px;height: 135px; overflow: hidden; border:1px solid #dbdee1; border-top: none; } .boxList ul{ list-style: none; 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>