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

Flower ·

更新时间:2024-09-20

· 520 次阅读

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

<b> 
<b> 
<title>我的滑动门</title> 
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;} 
</b> 
        全部 
        日志 
        咨询 
        相册 
        商城 
        社区 
       000  
      111 
      222 
      333 
      444 
      555 
        aaa 
        bbb 
        ccc 
        单击 
       000  
       111  
       222  
       333  
</b>

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

IE7 IE6 Opera firefox 滑动门 ie

1024 个赞