javascript实现tab切换特效
2015-11-12 08:51
531 查看
本文为大家分享了javascript实现tab切换特效的方法,具体的实现内容如下,先看一下效果图:
很简单的javascript实现tab切换特效
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Tab</title> <script src="js/jquery-1.11.1.js"></script> <style> *{ margin: 0; padding: 0; } div{ width: 184px; height: 100px; border: 1px solid gray; display: none; } .tab{ list-style: none; width: 200px; overflow: hidden; } .tab li{ float: left; width: 60px; border: 1px solid red; height: 30px; line-height: 30px; vertical-align: middle; text-align: center; cursor: pointer; } .on{ display: block; } .cur{ background: red; color: #fff; } </style> <script> $(function(){ $('.tab li').hover(function(){ $(this).addClass('cur').siblings().removeClass('cur'); $("div").eq($(this).index()).addClass("on").siblings().removeClass('on'); }) }) </script> </head> <body> <ul class="tab"> <li class="cur">最新</li> <li>热门</li> <li>新闻</li> </ul> <div class="on">11</div> <div>22</div> <div>33</div> <br/> <input type="text" value="你好请输入密码" onfocus="if(this.value=='你好请输入密码'){value=''}" onblur="if(this.value==''){value='你好请输入密码'}"> </body> </html>
这个实例只是为大家简单介绍了javascript实现tab切换特效,希望对大家的学习有所帮助。
您可能感兴趣的文章:
- 一实用的实现table排序的Javascript类库
- javascript 通用滑动门tab类
- javascript仿126邮箱TAB切换效果
- javascript 表格排序和表头浮动效果(扩展SortTable)
- javascript+css 新闻显示tab 选项卡效果
- javascript hashtable实现代码
- javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]
- javascript DOM操作之动态删除TABLE多行
- javascript 哈希表(hashtable)的简单实现
- javascript实现tabs选项卡切换效果(自写原生js)
- javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
- js(JavaScript)实现TAB标签切换效果的简单实例
- JavaScript控制table某列不显示的方法
- JavaScript实现将xml转换成html table表格的方法
- javascript清空table表格的方法
- javascript实现tab切换的四种方法
- javascript实现tab切换的两个实例
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- expand 与 unexpand 命令实例教程
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法