Code
1 <html>
2 <head>
3 .nTab{
4 float: left; font-weight: normal;
5 width: 300px; height:28px;
6 margin: 0 auto;
7 background-position:left;
8 background-repeat:repeat-y;
9 }
10 .nTab .TabTitle{
11 clear: both; border:0;
12 height: 28px;
13 overflow: hidden;
14 }
15 .nTab .TabTitle ul{
16 border:0;
17 margin:0;
18 padding:0;
19 }
20 .nTab .TabTitle li{
21 float: left;
22 width: 52px;
23 height:28px;
24 cursor: pointer;
25 margin-right:0px;
26 padding-right: 0px;
27 padding-left: 0px;
28 list-style-type: none;
29 }
30 .nTab .TabTitle .active{line-height:28px; color:#FF3300; font-size:14px; text-align:center;}
31 .nTab .TabTitle .normal{line-height:28px; font-size:12px; color:#712600; text-align:center; }
32 .nTab .TabContent{ height:40px;border:1px #333333 solid; font-weight: normal;}
33
34 .none {display:none;}
35 <script type="text/javascript">
36 function nTabs(thisObj,Num){
37 if(thisObj.className == "active")return;
38 var tabObj = thisObj.parentNode.id;
39 var tabList = document.getElementById(tabObj).getElementsByTagName("li");
40 for(i=0; i <tabList.length; i++)
41 {
42 if (i == Num)
43 {
44 thisObj.className = "active";
45 document.getElementById(tabObj+"_Content"+i).style.display = "block";
46 }else{
47 tabList[i].className = "normal";
48 document.getElementById(tabObj+"_Content"+i).style.display = "none";
49 }
50 }
51 }
52 </script>
53 </head>
54 <body>
55 <div class="nTab">
56 <!-- TOP -->
57 <div class="TabTitle">
58 <ul id="myTab1">
59 <li class="active" onclick="nTabs(this,0);">星期一</li>
60 <li class="normal" onclick="nTabs(this,1);">星期二</li>
61 <li class="normal" onclick="nTabs(this,2);">星期三</li>
62 <li class="normal" onclick="nTabs(this,3);">星期四</li>
63 <li class="normal" onclick="nTabs(this,4);">星期五</li>
64 <li class="normal" onclick="nTabs(this,5);">星期六</li>
65 </ul>
66 </div>
67 <!-- TOP 完-->
68 <!-- 内容-->
69 <div class="TabContent">
70 <div id="myTab1_Content0">1</div>
71 <div id="myTab1_Content1" class="none">2</div>
72 <div id="myTab1_Content2" class="none">3</div>
73 <div id="myTab1_Content3" class="none">4</div>
74 <div id="myTab1_Content4" class="none">5</div>
75 <div id="myTab1_Content5" class="none">6</div>
76 </div>
77 <!-- 内容 完-->
78 </div>
79 </body>
80 </html>
如果是点击触发.就选onclick [把它们两互相替换,就可随时变为感应或点击了]而如果想在一个页面上有N个滑动门就复制一套...将myTab0改成myTab1 myTab2 myTab3 等等等..都可以..或者换成你自己喜欢的名字...当然myTab0_Content0这个亦是要随着变动!
posted @
2009-07-03 21:13
专注网站建设和推广
阅读(
395)
评论()
编辑
收藏
举报
