js代码学习18---选项卡
来源:互联网 发布:禅道 linux 启动 编辑:程序博客网 时间:2024/06/13 23:04
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><link href="css/style.css" rel="stylesheet" type="text/css" /><!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script><script type="text/javascript" >//<![CDATA[ $(function(){ var $div_li =$("div.tab_menu ul li"); $div_li.click(function(){ $(this).addClass("selected") //当前<li>元素高亮 .siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮 var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。 $("div.tab_box > div") //选取子节点。不选取子节点的话,会引起错误。如果里面还有div .eq(index).show() //显示 <li>元素对应的<div>元素 .siblings().hide(); //隐藏其它几个同辈的<div>元素 }).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }) })//]]></script></head><body><div class="tab"> <div class="tab_menu"> <ul> <li class="selected">时事</li> <li>体育</li> <li>娱乐</li> </ul> </div> <div class="tab_box"> <div>时事</div> <div class="hide">体育</div> <div class="hide">娱乐</div> </div></div></body></html>
style.css
*{ margin:0; padding:0;} body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} .tab { width:240px;margin:50px;} .tab_menu { clear:both;} .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;} .tab_menu li.hover { background:#DFDFDF;} .tab_menu li.selected { color:#FFF; background:#6D84B4;} .tab_box { clear:both; border:1px solid #898989; height:100px;} .hide{display:none}
阅读全文
0 0
- js代码学习18---选项卡
- js-选项卡代码
- js实现tab页切换选项卡代码特效
- 最简短的js代码实现tab选项卡效果
- js 拖动选项卡
- JS选项卡
- JS选项卡
- js选项卡
- JS通用选项卡
- JS简单选项卡
- js选项卡
- js的选项卡
- js选项卡
- JS选项卡
- js选项卡
- js 选项卡实现
- js选项卡制作
- 纯 js 选项卡
- poj 1562 Oil Deposits
- Android新浪微博SDK分享功能接入
- IO系列之File
- js代码学习17--控制字体大小
- 关系型数据库和非关系型数据库的区别
- js代码学习18---选项卡
- 【51NOD】 1079
- 数据结构2-二叉树的最大深度
- 《算法4》排序算法总结
- HTTP请求报文和HTTP响应报文 -- JAVA 基础
- 微信小程序组件(四)text
- bzoj 3381: [Usaco2004 Open]Cave Cows 2 洞穴里的牛之二 RMQ
- js代码学习19---网页换皮肤
- 欢迎使用CSDN-markdown编辑器