javascript实现tab切换特效


Posted in Javascript onNovember 12, 2015

本文为大家分享了javascript实现tab切换特效的方法,具体的实现内容如下,先看一下效果图:

 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切换特效,希望对大家的学习有所帮助。

Javascript 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 #Javascript
JavaScript中获取Radio被选中的值
Nov 11 #Javascript
javascript图片滑动效果实现
Jan 28 #Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 #Javascript
九种原生js动画效果
Nov 11 #Javascript
js文字横向滚动特效
Nov 11 #Javascript
详解javascript遍历方式
Nov 11 #Javascript
You might like
文件上传类
2006/10/09 PHP
fgetcvs在linux的问题
2012/01/15 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
JScript的条件编译
2007/05/29 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
python中删除某个元素的方法解析
2019/11/05 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python如何读写CSV文件
2020/08/13 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
光荣入党自我鉴定
2014/01/22 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
社区志愿者培训方案
2014/06/10 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
结婚老公保证书
2015/02/26 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis