首页 > 代码库 > jQuery 选项卡
jQuery 选项卡
<!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=http://www.mamicode.com/"">老人乘公交无人让座拦车叫嚣</a></li> <li><a href=http://www.mamicode.com/"">汕头虐童细节 我移交日毒贩</a></li> <li><a href=http://www.mamicode.com/"">男子向虎求饶 情侣高速亲热</a></li> <li><a href=http://www.mamicode.com/"">少妇遭劫裸死 地铁女遭摸臀</a></li> <li><a href=http://www.mamicode.com/"">霆锋欲与王菲度假 柏芝卖房</a></li> </ul> <ul> <li><a href=http://www.mamicode.com/"">女神的新衣：陈伟霆倒立耍酷</a></li> <li><a href=http://www.mamicode.com/"">锋味：霆锋做小吃破世界纪录</a></li> <li><a href=http://www.mamicode.com/"">爸爸去哪：Kimi回归成小队长</a></li> <li><a href=http://www.mamicode.com/"">第一美差：20强三亚华丽出炉</a></li> <li><a href=http://www.mamicode.com/"">十二星座明星犯错后作何反应</a></li> </ul> <ul> <li><a href=http://www.mamicode.com/"">神剧十万个冷笑话爆笑来袭</a></li> <li><a href=http://www.mamicode.com/"">叶诗文热身状态佳目标卫冕</a></li> <li><a href=http://www.mamicode.com/"">EXO Chen助阵张力尹演唱会</a></li> <li><a href=http://www.mamicode.com/"">神同步当斗地主遇到节奏大师</a></li> <li><a href=http://www.mamicode.com/"">如此求婚小伙儿祝你分手快乐</a></li> </ul> </div></div><script src=http://www.mamicode.com/"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>
jQuery 选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。