js实现左侧网页tab滑动门效果代码


Posted in Javascript onSeptember 06, 2015

本文实例讲述了js实现左侧网页tab滑动门效果代码。分享给大家供大家参考。具体如下:

这是一款开口靠左的网页滑动门,网页滑动门,TAB滑动门,竖排滑动门菜单,竖排TAB选项卡,兼容IE6/IE7/FF/opera浏览器。其实竖排和横排的代码基本一样,只不过稍加修改就可以了。只要学会了一种滑动门,就能举一返三了。

运行效果截图如下:

js实现左侧网页tab滑动门效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖排的选项卡</title>
<meta name="keywords" content="" />
<style type="text/css">
body{font-size:12px;font-family:"Lucida Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#256bae;}
.warp{width:586px; height:269px !important; height:271px;border:1px solid #dbdcd7;}
.main{width:562px; height:269px !important;height:271px;padding:5px; margin-left:15px;overflow:hidden;float:left;}
.news{position:absolute;z-index:4;width:24px;}
.news ul{list-style:none;padding:0;margin:0;}
.news ul li{ height:84px !important;height:88px;width:20px;margin-bottom:0px;padding-top:5px;text-align:center;cursor:pointer;;vertical-align:middle; background-color:#e5e5e5; border-right:#dbdcd7 solid 1px;border-bottom:#dbdcd7 solid 1px;}
.news ul li.on{background-color:#ffffff; border:#FFFFFF 0px}
.news span{display:block; margin-top:9px !important; margin-top:20px;}
.dis{display:block;}
.undis{display:none;}
</style>
 <script type="text/javascript">
 function g(o){return document.getElementById(o);}
 function HoverLi(m,n,counter){for(var i=1;i<=counter;i++){g('tb_'+m+i).className='';g('tbc_'+m+i).className='undis';}g('tbc_'+m+n).className='dis';g('tb_'+m+n).className='on';}
 </script>
</head>
<body>
<strong>兼容IE6/IE7/FF/opera</strong><br><br>
<div class="warp">
 <div class="news">
  <ul>
   <li class="on" id="tb_11" onmouseover="HoverLi(1,1,3);"><span>企业新闻</span></li>
   <li class="" id="tb_12" onmouseover="HoverLi(1,2,3);"><span>业内咨讯</span></li>
  <li class="" id="tb_13" onmouseover="HoverLi(1,3,3);"><span>业内咨讯</span></li>
  </ul>
 </div>
<div class="dis" id="tbc_11">
  <div class="main">
  1<br>企业新闻的内容1<br>企业新闻的内容1<br>企业新闻的内容1
 </div>
 </div>
 <div class="undis" id="tbc_12">
  <div class="main">
  2<br>业内咨讯的内容2<br>业内咨讯的内容2<br>业内咨讯的内容2<br>
  </div>
 </div>
  <div class="undis" id="tbc_13">
  <div class="main">
  3<br>业内咨讯的内容3<br>业内咨讯的内容3<br>业内咨讯的内容3<br>
  </div>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
JavaScript日历实现代码
Sep 12 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
js实现每日签到功能
Nov 29 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
jQuery焦点图轮播特效代码分享(3款)
Sep 05 #Javascript
You might like
PHP4和PHP5共存于一系统
2006/11/17 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
js返回顶部实例分享
2016/12/21 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
Python中装饰器学习总结
2018/02/10 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
深入浅析Python的类
2018/06/22 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
护理专业自荐书
2014/06/04 职场文书
人大代表选举标语
2014/10/07 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
Python matplotlib绘制雷达图
2022/04/13 Python