当前位置：Gxlcms > JavaScript > 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera

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

时间：2021-07-01 10:21:17 帮助过：8人阅读

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

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

保留自己用

<!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> 
<style type="text/css"> 
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;}

</style>

</head> 
<body>

<ul id="myTab0"> 
        <li class="active" onmouseover="nTabs(this,0);">全部</li> 
        <li class="normal" onmouseover="nTabs(this,1);">日志</li> 
        <li class="normal" onmouseover="nTabs(this,2);">咨询</li> 
        <li class="normal" onmouseover="nTabs(this,3);">相册</li> 
        <li class="normal" onmouseover="nTabs(this,4);">商城</li> 
        <li class="normal" onmouseover="nTabs(this,5);">社区</li> 
      </ul> 
     
     
     
       000  
      111 
      222 
      333 
      444 
      555 
     
   
   
   
   
     
     
      <ul id="myTab1"> 
        <li class="active" onclick="nTabs(this,0);">aaa</li> 
        <li class="normal" onclick="nTabs(this,1);">bbb</li> 
        <li class="normal" onclick="nTabs(this,2);">ccc</li> 
        <li class="normal" onclick="nTabs(this,3);">单击</li> 
      </ul> 
     
     
     
       000  
       111  
       222  
       333

</body> 
</html>

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

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

人气教程排行