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判断是否为数组的函数: isArray()
Oct 30 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP仿盗链代码
2012/06/03 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python实现浪漫的烟花秀
2019/01/30 Python
详解python中的线程与线程池
2019/05/10 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
几个SQL的面试题
2014/03/08 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
医院消毒隔离制度
2015/08/05 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL