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 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
Vue声明式渲染详解
May 17 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JS实现放大镜效果
Sep 21 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python生成IP段的方法
2015/07/07 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python学生信息管理系统(完整版)
2020/04/05 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Python验证码截取识别代码实例
2020/05/16 Python
详解python datetime模块
2020/08/17 Python
Python eval函数介绍及用法
2020/11/09 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
微信搭讪开场白
2015/05/28 职场文书
门球健将观后感
2015/06/16 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
我的收音机情缘
2022/04/05 无线电