js代码学习18---选项卡
2017-10-04 13:40
337 查看
<!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}
相关文章推荐
- js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
- jQuery学习笔记(七)JS 一些基本操作代码整理
- js 学习总结,可利用其与原生代码交互
- JS实现仿Windows经典风格的选项卡Tab切换代码
- JS+CSS实现仿msn风格选项卡效果代码
- AJAXPro用法,关于JS同步和异步调用后台代码的学习
- FVC/JEM代码学习18:xCheckRDCostInter
- js学习总结_选项卡封装(实例讲解)
- 一款很个性的蓝色JS+CSS选项卡代码
- js基于面向对象实现网页TAB选项卡菜单效果代码
- 【学习笔记五】 - js引用类型 《js高程》1-5章的代码笔记
- node.js学习笔记——《node.js开发指南》代码中需要注意的几点
- js实现简洁的滑动门菜单(选项卡)效果代码
- 我们爱分享----200多个js技巧代码(5)----学习用
- JS实现完全语义化的网页选项卡效果代码
- 原生js实现tab选项卡里内嵌图片滚动特效代码
- JS面向对象学习之普通面向过程式选项卡编写(笔记)
- js学习入门教程笔记:css+html+js用户注册代码实现
- JS操作的Html控件及其代码→学习笔记