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控制表单不能输入空格的小例子
Nov 20 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php查看当前Session的ID实例
2015/03/16 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
python 列表删除所有指定元素的方法
2018/04/19 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
2014红色之旅心得体会
2014/10/07 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
网络妈妈观后感
2015/06/08 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python