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 String对象中常用方法小结(字符串操作)
Jan 27 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
基于vue.js实现分页查询功能
Dec 29 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
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
PHP strtotime函数详解
2009/12/18 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php 数组使用详解 推荐
2011/06/02 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
详解Python中的type()方法的使用
2015/05/21 Python
Python 文件处理注意事项总结
2017/04/10 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python学习小技巧总结
2018/06/10 Python
python判断完全平方数的方法
2018/11/13 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
python对一个数向上取整的实例方法
2020/06/18 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
xxx同志考察材料
2014/02/07 职场文书
社区义诊活动总结
2014/04/30 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
员工团队活动方案
2014/08/28 职场文书
创业计划书之水果店
2019/07/18 职场文书