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 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
浅谈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
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
人机交互程序 python实现人机对话
2017/11/14 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
django如何自己创建一个中间件
2019/07/24 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
Python正则表达式如何匹配中文
2020/05/27 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
40岁生日感言
2014/02/15 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python