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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
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
用PHP动态创建Flash动画
2006/10/09 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
PHP答题类应用接口实例
2015/02/09 PHP
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python内置函数 next的具体使用方法
2017/11/24 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python查看数据类型的方法
2019/10/12 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Python 从attribute到property详解
2020/03/05 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
详解python算法常用技巧与内置库
2020/10/17 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
实习单位接收函
2014/01/11 职场文书
安全责任书模板
2014/07/22 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书