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 相关文章推荐
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Node 升级到最新稳定版的方法分享
May 17 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PHP和XSS跨站攻击的防范
2007/04/17 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
javascript数组排序汇总
2015/07/07 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
深入理解Promise.all
2018/08/08 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
浅谈flask源码之请求过程
2018/07/26 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
自定义django admin model表单提交的例子
2019/08/23 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
Python内存映射文件读写方式
2020/04/24 Python
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
简历自我评价怎么写好呢?
2014/01/04 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
部队2014年终工作总结
2014/11/27 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js