JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)


Posted in Javascript onSeptember 24, 2015

本文实例讲述了JS实现滑动菜单效果代码。分享给大家供大家参考。具体如下:

这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来,有些同志曾经为同一个页面布置两个滑动门而烦恼,参考一下本例子,相信你会找到答案,而且有各种排列方式的选项卡,总有一款会满足你。

运行效果截图如下:

JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>选项卡</title>
<style type="text/css">
<!--
* { margin:0; padding:0; font-size:12px; font-weight:normal; }
.jj { font-weight:bolder!important; }
.box { border-top-color:#c00!important; }
.pr { color:#060!important; }
#tab01 { position:relative; width:336px; height:88px; padding-top:15px; margin:50px; overflow:hidden; }
#tab01 h3 { position:relative; z-index:2; float:left; height:14px; padding:0 7px 0 8px; margin-left:-1px; border-left:solid 1px #ccc; border-right:solid 1px #fff; text-align:center; background:#fff; cursor:pointer; }
#tab01 h3.up { height:18px; padding:5px 7px 0 7px; margin:-6px 0 0 0; border:solid #ccc; border-width:1px 1px 0; color:#c00; }
#tab01 div { display:none; position:absolute; left:0; top:32px; z-index:1; width:324px; height:54px; padding:5px; border:solid 1px #ccc; color:#666; }
#tab01 div.up { display:block; }
#tab02 { position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; }
#tab02 h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; }
#tab02 h4.up { color:#c00; }
#tab02 ol { display:none; height:54px; padding:5px; color:#666; }
#tab02 ol.up { display:block; }
#tab03 { position:relative; width:100px; margin:50px; }
#tab03 h3 { position:relative; z-index:1; height:16px; padding-top:4px; margin-bottom:-1px; border:solid #ccc; border-width:1px 0 1px 1px; text-align:center; font-family:宋体; background:#eee; cursor:pointer; }
#tab03 h3.up { z-index:3; color:#c00; background:#fff; }
#tab03 div.tab { display:none; position:absolute; left:99px; top:0; z-index:2; width:300px; height:200px; padding:5px; border:solid 1px #ccc; color:#666; }
#tab03 div.tab.up { display:block; }
-->
</style>
</head>
<body>
<div id="tab01">
 <h3>首页</h3>
  <div class="jj"><p>嘿嘿,无视div原始class值。</p></div>
 <h3 class="pr">测试</h3>
  <div><p>继续无视h3原始class值。</p></div>
 <h3>无聊</h3>
  <div><p>h3没有值也可以~</p></div>
 <h3 class="box">傻蛋</h3>
  <div><p>div没有值一样可以~</p></div>
</div>
<div id="tab02">
 <h4>首页</h4>
  <ol class="pr"><li>嘿嘿,无视容器原始class值。</li></ol>
 <h4 class="box">测试</h4>
  <ol><li>继续无视h3原始class值。</li></ol>
 <h4>无聊</h4>
  <ol><li>h3没有值也可以~</li></ol>
 <h4 class="bb">傻蛋</h4>
  <ol><li>div没有值一样可以~</li></ol>
</div>
<div id="tab03">
 <h3>首页</h3>
  <div class="tab"><p>嘿嘿,无视h3原始class值。</p></div>
 <h3>测试</h3>
  <div class="tab wushi"><p>继续无视div原始class值。</p></div>
 <h3>无聊</h3>
  <div class="tab"><p>h3没有值也可以~</p></div>
 <h3 class="box">傻蛋</h3>
  <div class="tab tab123"><p>class值相似一样也可以~</p><div><p>指定class后,即时再多一个div也行。</p></div></div>
</div>
<script type="text/javascript">
<!--
function Pid(id,tag){
 if(!tag){
  return document.getElementById(id);
  }
 else{
  return document.getElementById(id).getElementsByTagName(tag);
  }
}
function tab(id,hx,box,iClass,s,pr){
 var hxs=Pid(id,hx);
 var boxs=Pid(id,box);
 if(!iClass){ // 如果不指定class,则:
  boxsClass=boxs; // 直接使用box作为容器
 }
 else{ // 如果指定class,则:
  var boxsClass = [];
  for(i=0;i<boxs.length;i++){
   if(boxs[i].className.match(/\btab\b/)){// 判断容器的class匹配
    boxsClass.push(boxs[i]);
   }
  }
 }
 if(!pr){ // 如果不指定预展开容器,则:
  go_to(0); // 默认展开序列
  yy();
 }
 else {
  go_to(pr);
  yy();
 }
 function yy(){
  for(var i=0;i<hxs.length;i++){
   hxs[i].temp=i;
   if(!s){// 如果不指定事件,则:
    s="onmouseover"; // 使用默认事件
    hxs[i][s]=function(){
     go_to(this.temp);
    }
   }
   else{
    hxs[i][s]=function(){
     go_to(this.temp);
    }
   }
  }
 }
 function go_to(pr){
  for(var i=0;i<hxs.length;i++){
   if(!hxs[i].tmpClass){
    hxs[i].tmpClass=hxs[i].className+=" ";
    boxsClass[i].tmpClass=boxsClass[i].className+=" ";
   }
   if(pr==i){
    hxs[i].className+=" up"; // 展开状态:标题
    boxsClass[i].className+=" up"; // 展开状态:容器
   }
   else {
    hxs[i].className=hxs[i].tmpClass;
    boxsClass[i].className=boxsClass[i].tmpClass;
   }
  }
 }
}
tab("tab01","h3","div","","onclick",2);
tab("tab02","h4","ol");
tab("tab03","h3","div","tab"); 
//-->
</script>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
Node.js学习入门
Jan 03 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 #Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 #Javascript
js中不同的height, top的区别对比
Sep 24 #Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 #Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 #Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 #Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 #Javascript
You might like
php 空格,换行,跳格使用说明
2009/12/18 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python封装shell命令实例分析
2015/05/05 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python 获取div标签中的文字实例
2018/12/20 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
PHP开发的一般流程
2013/08/13 面试题
师德师风承诺书
2014/05/23 职场文书
店铺转让协议书
2014/12/02 职场文书
医学会议开幕词
2016/03/03 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript