js+css tab切换效果代码

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
002 <html xmlns="http://www.w3.org/1999/xhtml">
003 <head>
004 <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
005 <title>tabMenu</title>
006 <style type="text/css">
007 <!--
008 body,div,ul,li{
009  margin:0 auto;
010  padding:0;
011 }
012 body{
013  font:12px "宋体";
014  text-align:center;
015 }
016 a:link{
017  color:#000033;
018  text-decoration:none;
019 }
020 a:visited {
021  color:#000033;
022  text-decoration:none;
023 }
024 a:hover {
025  color: #c00;
026  text-decoration:underline;
027 }
028 ul{
029  list-style:none;
030 }
031 .main{
032  clear:both;
033  padding:8px;
034  text-align:center;
035 }
036 /*第一种形式*/
037 #tabs0 {
038  height: 428px;
039  width: 601px;
040  border: 1px solid #cbcbcb;
041  background-color: #f2f6fb;
042 }
043 .menu0{
044  width: 400px;
045 }
046 .menu0 li{
047  display:block;
048  float: left;
049  padding: 4px 0;
050  width:100px;
051  text-align: center;
052  cursor:pointer;
053  background: #FFFFff;
054 }
055 .menu0 li.hover{
056  background: #f2f6fb;
057 }
058 #main0 ul{
059  display: none;
060 }
061 #main0 ul.block{
062  display: block;
063 }
064 /*第二种形式*/
065 #tabs1{
066  text-align:left;
067  width:400px;
068 }
069 .menu1box{
070  position:relative;
071  overflow:hidden;
072  height:22px;
073  width:400px;
074  text-align:left;
075 }
076 #menu1{
077  position:absolute;
078  top:0;
079  left:0;
080  z-index:1;
081 }
082 #menu1 li{
083  float:left;
084  display:block;
085  cursor:pointer;
086  width:72px;
087  text-align:center;
088  line-height:21px;
089  height:21px;
090 }
091 #menu1 li.hover{
092  background:#fff;
093  border-left:1px solid #1068E3;
094  border-top:1px solid #1068E3;
095  border-right:1px solid #1068E3;
096 }
097 .main1box{
098  clear:both;
099  margin-top:-1px;
100  border:1px solid #1068E3;
101  height:186px;
102  width:390px;
103 }
104 #main1 ul{
105  display: none;
106 }
107 #main1 ul.block{
108  display: block;
109 }
110 /*第三种形式*/
111 .menu2box{
112  position:relative;
113  overflow:hidden;
114  height:22px;
115  width:400px;
116  text-align:left;
117  background: #FFFFff;
118 }
119 #tabs2 {
120  height: 200px;
121  width: 400px;
122  border: 1px solid #cbcbcb;
123  background-color: #f2f6fb;
124 }
125 #tip2{
126  position:absolute;
127  top:0;
128  left:0;
129  height:22px;
130  line-height:22px;
131  z-index:0;
132  width:100px;
133  background: #f2f6fb;
134 }
135 #menu2{
136  position:absolute;
137  top:0;
138  left:0;
139  z-index:1;
140 }
141 #menu2 li{
142  display:block;
143  float: left;
144  padding: 4px 0;
145  width:100px;
146  text-align: center;
147  cursor:pointer;
148 }
149 -->
150 </style>
151 <script>
152 <!--
153 /*第一种形式 第二种形式 更换显示样式*/
154 function setTab(m,n){
155  var tli=document.getElementById("menu"+m).getElementsByTagName("li");
156  var mli=document.getElementById("main"+m).getElementsByTagName("ul");
157  for(i=0;i<tli.length;i++){
158   tli[i].className=i==n?"hover":"";
159   mli[i].style.display=i==n?"block":"none";
160  }
161 }
162 /*第三种形式 利用一个背景层定位*/
163 var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
164 function nowtab(m,n){
165  if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
166  document.getElementById("tip"+m).style.left=n*100+'px';
167  document.getElementById("main2").innerHTML=m3[n];
168 }
169 //-->
170 </script>
171 </head>
172 <body>
173 <br />
174 <br />
175 <!--第一种形式-->
176 <div id="tabs0">
177  <ul class="menu0" id="menu0">
178   <li onclick="setTab(0,0)" class="hover">新闻</li>
179   <li onclick="setTab(0,1)">评论</li>
180   <li onclick="setTab(0,2)">技术</li>
181   <li onclick="setTab(0,3)">点评</li>
182  </ul>
183  <div class="main" id="main0">
184   <ul class="block"><li>新闻列表</li></ul>
185   <ul><li>评论列表</li></ul>
186   <ul><li>技术列表</li></ul>
187   <ul><li>点评列表</li></ul>
188  </div>
189 </div>
190 <br />
191 <br />
192 <!--第二种形式-->
193 <div id="tabs1">
194  <div class="menu1box">
195   <ul id="menu1">
196    <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
197    <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
198    <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
199    <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
200   </ul>
201  </div>
202  <div class="main1box">
203   <div class="main" id="main1">
204    <ul class="block"><li>新闻列表</li></ul>
205    <ul><li>评论列表</li></ul>
206    <ul><li>技术列表</li></ul>
207    <ul><li>点评列表</li></ul>
208   </div>
209  </div>
210 </div>
211 <br />
212 <br />
213 <!--第三种形式-->
214 <div id="tabs2">
215  <div class="menu2box">
216   <div id="tip2"></div>
217   <ul id="menu2">
218    <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
219    <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
220    <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
221    <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
222   </ul>
223  </div>
224   <div class="main" id="main2">
225 新闻内容
226  </div>
227 </div>
228 </body>
 </html>
时间： 2024-11-13 08:17:29

js+css tab切换效果代码的相关文章

一个js的tab切换效果代码[代码分离]_javascript技巧

支持自动播放 可定义鼠标事件延迟 不限制html结构 假设HTML如下: 复制代码 代码如下:  <ul> <li id="t1">tab1</li> <li id="t2">tab2</li> <li id="t3">tab3</li> </ul> <div id="c1">content1</div> &

js实现tab切换效果实例_javascript技巧

直接先来个真相吧:   [HTML代码] <div id="menu"> <!--tag标题--> <ul id="nav"> <li><a href="#" class="selected">tab1</a></li> <li><a href="#" class="">tab2&

js 图片幻灯切换效果代码

picChange图片切换特效 - version:0.3.2 - 2010.5.31修改 代码示例:$pic("picChange").picChange({changeStyle:"fade",time:250}); 当前模式:淡出效果,250毫秒. 切换效果淡出效果移出效果联动效果直接切换效果切换时间ms: 切换方向上下左右点击切换(默认鼠标停留时切换) 定时切换[New!]ms(留空则不切换)

div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容_javascript技巧

框1111 框2222 框3333 框4444 这里是内容撒．111．． 这里是内容撒．111．． 这里是内容撒．111．． 这里是内容撒222．． 这里是内容撒．222．． 这里是内容撒．222．． 这里是内容撒．333．． 这里是内容撒．333．． 这里是内容撒．333．． 这里是内容撒．444．． 这里是内容撒．444．． 这里是内容撒．444．．

纯CSS简洁的TAB切换效果代码

新闻 评论 技术 点评 新闻列表 评论列表 技术列表 点评列表 新闻 评论 技术 点评 新闻列表 评论列表 技术列表 点评列表 新闻 评论 技术 点评 新闻内容

css图片切换效果代码[不用js]_经验交流

123

js css 圆角边框效果代码

提示:您可以先修改部分代码再运行 圆角效果 本代码由网页特效网提供 提示:您可以先修改部分代码再运行

js css图片切换效果

jquery实现的tab切换效果

  以下是源代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>div