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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
Javascript之Math对象详解
Jun 07 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 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
对javascript和select部件的结合运用
2006/10/09 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
php邮件发送的两种方式
2020/04/28 PHP
javascript Excel操作知识点
2009/04/24 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Python中正则表达式的用法总结
2019/02/22 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python猜数字算法题详解
2020/03/01 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
超市业务员岗位职责
2013/12/05 职场文书
酒店司机岗位职责
2013/12/14 职场文书
村干部培训班主持词
2014/03/28 职场文书
生物学专业求职信
2014/07/23 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
历史博物馆观后感
2015/06/05 职场文书
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技