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中获取frames中的元素示例代码
Jul 30 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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函数和特点
2013/08/08 PHP
使用php计算排列组合的方法
2013/11/13 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
js下弹出窗口的变通
2007/04/18 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
详解react-redux插件入门
2018/04/19 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python迭代用法实例教程
2014/09/08 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
如何用Python合并lmdb文件
2018/07/02 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
python 写一个文件分发小程序
2020/12/05 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
师范生自荐信模板
2014/05/28 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android