一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera

如果是感应触发.就选onmouseover
如果是点击触发.就选onclick    [把它们两互相替换,就可随时变为感应或点击了]

而如果想在一个页面上有N个滑动门
就复制一套...将myTab0改成myTab1  myTab2  myTab3    等等等..都可以..或者换成你自己喜欢的名字...当然myTab0_Content0这个亦是要随着变动!

保留自己用

我的滑动门

body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 960px;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}

function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i

  • 全部
  • 日志
  • 咨询
  • 相册
  • 商城
  • 社区

000

111

222

333

444

555

  • aaa
  • bbb
  • ccc
  • 单击

000

111

222

333

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera

    如果是感应触发.就选onmouseover 如果是点击触发.就选onclick    [把它们两互相替换,就可随时变为感应或点击了] 而如果想在一个页面上有N个滑动门 就复制一套...将myTab0改成myTab1  myTab2  myTab3    等等等..都可以..或者换成你自己喜欢的名字...当然myTab0_Content0这个亦是要随着变动! 保留自己用 我的滑动门 body{ color: #000; font-family: "宋体", arial; font-siz

  • CSS中的滑动门技术

    作者:nobita 2005-5-8 9:39:31ISSN: 1534-0295. 20 October 2003 – Issue No. 160 原文作者:Douglas Bowman 原文出自:A List Apart 中文翻译:54player.com nobita 版权说明:本文中文翻译版权归译者54player.com nobita所有.需要转载发表的,请先与作者联系 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果.根

  • JavaScript实现滑动门效果

    JavaScript实现滑动门效果

    本文实例为大家分享了JavaScript实现滑动门效果的具体代码,供大家参考,具体内容如下 一.什么是滑动门 首先你要了解什么是滑动门. 生活中我们经常看到一些网站或是商城有一些滑动门的效果 那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法, 二.实现滑动门所需技术 1.简单的HTML基础知识 2.简单的CSS基础样式 3.基本的javascript知识 三.如何实现滑动门(重点) 准备好一段HTML代码 <div id="container"> <im

  • 基于JavaScript实现滑动门效果

    基于JavaScript实现滑动门效果

    本文实例为大家分享了滑动门效果的具体代码,供大家参考,具体内容如下 滑动门效果: 原理: 一共四道门,初始情况下,第一道门打开,其他三道门关闭,如第一个图所示. 假设图片的宽度是120px,其他三道门露出的宽度是80px. 初始状态下, 第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px. 当第二道门打开时, 第二道门左边的距离是80px,为(120-40)px 第三道和第四道门左边的距离不变. 当第三道门打开时, 第二道门左边的距离是80px,

  • 一个js实现的所谓的滑动门

    滑动门:我不理解为什么这样叫. 我就命名为:JMenuTab吧,因为写它是为了当我的菜单. IE6,FireFox下测试通过. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

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

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

    本文实例讲述了js实现左侧网页tab滑动门效果代码.分享给大家供大家参考.具体如下: 这是一款开口靠左的网页滑动门,网页滑动门,TAB滑动门,竖排滑动门菜单,竖排TAB选项卡,兼容IE6/IE7/FF/opera浏览器.其实竖排和横排的代码基本一样,只不过稍加修改就可以了.只要学会了一种滑动门,就能举一返三了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-tab-cha-style-codes/ 具体代码如下: <!DOCTY

  • JS+CSS实现简易的滑动门效果代码

    JS+CSS实现简易的滑动门效果代码

    本文实例讲述了JS+CSS实现简易的滑动门效果代码.分享给大家供大家参考.具体如下: 看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

  • JS实现漂亮的淡蓝色滑动门效果代码

    JS实现漂亮的淡蓝色滑动门效果代码

    本文实例讲述了JS实现漂亮的淡蓝色滑动门效果.分享给大家供大家参考.具体如下: 这款漂亮淡蓝色滑动门代码,感觉很不错哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-blue-hdm-menu-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

  • js实现的早期滑动门菜单效果代码

    js实现的早期滑动门菜单效果代码

    本文实例讲述了js实现的早期滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是传说中的早期滑动门菜单Demo代码,测试时请把鼠标放到左侧相应的导航栏目上,放在左侧菜单上的时候,你就发现玄机了,右侧的内容会跟着变化,JS与HTML结合实现的,比较传统的导航效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-old-ver-menu-cha-codes/ 具体代码如下: <HTML> <HEAD> <TI

  • javascript 通用滑动门tab类

    滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容

随机推荐