js实现简洁的TAB滑动门效果代码


Posted in Javascript onSeptember 06, 2015

本文实例讲述了js实现简洁的TAB滑动门效果代码。分享给大家供大家参考。具体如下:

这是一款滑动门代码,简洁TAB,简单的鼠标导航效果,大家或许经常见到的效果啦,鼠标放在主菜单上,下边框架内的内容会跟着变换,鼠标不需要点击,只需要滑上去就可切换内容,像一扇门,所以有时候别人叫“滑动门”菜单。

运行效果如下图所示:

js实现简洁的TAB滑动门效果代码

在线演示地址如下:

具体代码如下:

<html>
<head>
 <title>简洁TAB</title>
 <script type="text/javascript">
 function nTabs(thisObj, Num) {
  if (thisObj.className == "active") return;
  var tabObj = thisObj.parentNode.id;//赋值指定节点的父节点的id名字
  var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  for (i = 0; i < tabList.length; i++) {//点击之后,其他tab变成灰色,内容隐藏,只有点击的tab和内容有属性
  if (i == Num) {
   thisObj.className = "active";
   document.getElementById(tabObj + "_Content" + i).style.display = "block";
  } else {
   tabList[i].className = "normal";
   document.getElementById(tabObj + "_Content" + i).style.display = "none";
  }
  }
 }
 </script>
 <style type="text/css">
 *
 {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
 }
 .nTab
 {
  width: 500px;
  height:200px;
  margin: 20px auto;
  border: 1px solid #333;
  overflow: hidden;
 }
 .none
 {
  display: none;
 }
 .nTab .TabTitle li
 {
  float: left;
  cursor: pointer;
  height: 35px;
  line-height: 35px;
  font-weight: bold;
  text-align: center;
  width: 124px;
 }
 .nTab .TabTitle li a
 {
  text-decoration: none;
 }
 .nTab .TabTitle .active
 {
  background-color:blue;
  color: #336699;
 }
 .nTab .TabTitle .normal
 {
  color: #F1AC1C;
 }
 .nTab .TabContent
 {
  clear: both;
  overflow: hidden;
  background: #fff;
  padding: 5px;
  display: block;
  height:100px;
 }
 </style>
</head>
<body>
 <div class="nTab">
 <div class="TabTitle">
  <ul id="myTab">
  <li class="active" onmouseover="nTabs(this,0);">ASP</li>
  <li class="normal" onmouseover="nTabs(this,1);">PHP2</li>
  <li class="normal" onmouseover="nTabs(this,2);">PHP3</li>
  <li class="normal" onmouseover="nTabs(this,3);">PHP4</li>
  </ul>
 </div>
 <div class="TabContent" >
  <div id="myTab_Content0">
  第一块内容</div>
  <div id="myTab_Content1" class="none">
  第二块内容</div>
  <div id="myTab_Content2" class="none">
  第三块内容</div>
  <div id="myTab_Content3" class="none">
  第四块内容</div>
 </div>
 </div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
Jquery Fade用法详解
Nov 06 jQuery
js Proxy的原理详解
May 25 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
js实现左侧网页tab滑动门效果代码
Sep 06 #Javascript
浅谈javascript函数式编程
Sep 06 #Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 #Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 #Javascript
简单谈谈javascript Date类型
Sep 06 #Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 #Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 #Javascript
You might like
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
php微信支付接口开发程序
2016/08/02 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
python中去空格函数的用法
2014/08/21 Python
Python数据结构之翻转链表
2017/02/25 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
简单了解python中对象的取反运算符
2019/07/01 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
利用python汇总统计多张Excel
2020/09/22 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
论文指导教师评语
2014/04/28 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python