HTML+JS+CSS选项卡效果[搜集整理]

最新推荐文章于 2021-06-04 23:37:09 发布

原创最新推荐文章于 2021-06-04 23:37:09 发布 · 4.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

WEB应用开发

本文提供了几种不同的选项卡效果实现方案，包括模仿Windows选项卡、淘宝网站风格的选项卡及简洁风格的选项卡等，通过HTML、CSS和JavaScript实现交互式内容切换。

1.模仿Windows选项卡

<HTML> <HEAD> <script> var Num=4; //这里是增加选项卡的数目 var carNum=2+Num function document.onselectstart(){ var obj=event.srcElement if(obj.tagName=="SPAN"){ return false; } } function document.onmousedown(){ var obj=event.srcElement var pobj=obj.parentElement.id; if(obj.className=="span"){ for(i=1;i<carNum;i++){ if(pobj==("btn"+i)){ document.all("td"+i).style.backgroundColor="menu" document.all("btn"+i).style.height=20 content(i) }else{ document.all("td"+i).style.backgroundColor="white" document.all("btn"+i).style.height=18 } } } } function content(i){ //这里是菜单名 mnuItem(1,"第一项") mnuItem(2,"图片世界") mnuItem(3,"第三个内容") mnuItem(4,"表格") mnuItem(5,"滚动字幕") //End if(i==1){ span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女<br>" +"<input><br><input><br><input type=submit>" } if(i==2){ span1.innerHTML="<img src=http://www.fnfnet.com/images/banner.gif width=250>" } if(i==3){ span1.innerHTML="<h1>第三个内容</h1>" } if(i==4){ span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>" +"<tr><td>aaaaaaaa</td></tr>" +"<tr><td>bbbbbbbb</td></tr>" +"<tr><td>ccccccccc</td></tr></table>" } if(i==5){ span1.innerHTML="<marquee>" +"这是第五个内容" +"啦啦..？</marquee>" } } function mnuItem(i,con){ document.all("MenuName"+i).innerText=con } </script> <style>td{font-size:9pt} .span{ cursor:default; padding-left:5; padding-top:2; padding-right:5; padding-bottom:0; width:100%; height:100%; } </style> <TITLE></TITLE> <META http-equiv="content-type" content="text/html;charset=gb2312"> </HEAD> <BODY bgcolor=FFFFFF onload=content(1) onselectstart="return false"> <p> <table width=0 onselectstart="return false" bgcolor=menu align=center> <tr> <td> <table cellpadding=0 cellspacing=0 onselectstart="return false"> <tr height=20> <td valign=bottom> <table cellspacing=0 cellpadding=0 bgcolor=menu> <tr> <td width=1 height=1></td><td width=1 height=1></td> <td bgcolor=white></td><td></td><td></td> </tr> <tr> <td width=1 height=1></td> <td width=1 height=1 bgcolor=white></td> <td></td> <td bgcolor=black></td> <td></td> </tr> <tr> <td width=1 bgcolor=white></td> <td width=1 height=1></td> <td id=btn1 height=20><span class=span id=MenuName1> </span></td> <td width=1 bgcolor=gray></td> <td bgcolor=black width=1></td> </tr> <tr> <td bgcolor=white></td> <td colspan=4 height=1 bgcolor=menu id=td1></td> </tr> </table> </td> <script> for(i=2;i<carNum;i++){ tdBody="<td valign=bottom>" tdBody+=" <table cellspacing=0 cellpadding=0 bgcolor=menu>" tdBody+=" <tr>" tdBody+=" <td width=1 height=1><//td>" tdBody+=" <td width=1 height=1><//td>" tdBody+=" <td bgcolor=white><//td>" tdBody+=" <td></td>" tdBody+=" <td></td>" tdBody+=" <//tr>" tdBody+=" <tr>" tdBody+=" <td width=1 height=1><//td>" tdBody+=" <td width=1 height=1 bgcolor=white><//td>" tdBody+=" <td></td>" tdBody+=" <td bgcolor=black><//td><td></td>" tdBody+=" <//tr>" tdBody+=" <tr>" tdBody+=" <td width=1 bgcolor=white><//td>" tdBody+=" <td width=1 height=1><//td>" tdBody+=" <td id=btn"+i+" height=18><span class=span id=MenuName"+i+"> <//span></td>" tdBody+=" <td width=1 bgcolor=gray><//td>" tdBody+=" <td bgcolor=black width=1><//td>" tdBody+=" <//tr>" tdBody+=" <tr>" tdBody+=" <td bgcolor=white><//td>" tdBody+=" <td colspan=4 height=1 bgcolor=white id=td"+i+"><//td>" tdBody+=" <//tr>" tdBody+=" <//table>" tdBody+="<//td>"; document.write(tdBody) } </script> <td style="border-bottom:1 white solid" width=50></td> </tr> </table> <div style="padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset"> <span id=span1></span> </div> </td> </tr> </table> </BODY> </HTML>

2.模仿taobao

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html lang="us-en"> <head> <title>css选项卡(html组件)</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta name="keywords" content=" "/> <meta name="description" content="" /> <style type="text/css"> div.card div{ background-color:#FF8000; float:left; padding:1px; padding-bottom:0; clear:both; width:405px;} div.card a{ color:black; font-size:14px; text-decoration:none; float:left; width:100px; text-align:center; background-color:white; margin-right:1px;} div.card div.home a.home{ font:normal normal bold 14px/1.5 宋体;} div.card div.international a.international { font:normal normal bold 14px/1.5 宋体;} div.card div.sport a.sport{ font:normal normal bold 14px/1.5 宋体;} div.card div.finance a.finance{ font:normal normal bold 14px/1.5 宋体;} div.card div.content{ background-color:white; border:1px solid #ff8000; height:100px;} </style> <script type="text/javascript"> var shq={} shq.cmenu=function(e) { var e=window.event?window.event.srcElement:e.target; if(/a/i.test(e.tagName)){ e.parentNode.className=e.className; e.parentNode.nextSibling.innerHTML=e.innerHTML; e.parentNode.nextSibling.style.cssText='border-top:none'; e.blur(); } } </script> </head> <body> <div class="card"> <div onclick="shq.cmenu(event)"> <a href="#" class="home">国内</a> <a href="#" class="international">国际</a> <a href="#" class="sport">体育</a> <a href="#" class="finance">财经</a> </div><div class="content"></div> </div> <div class="card"> <div onclick="shq.cmenu(event)"> <a href="#" class="home">国内</a> <a href="#" class="international">国际</a> <a href="#" class="sport">体育</a> <a href="#" class="finance">财经</a> </div><div class="content"></div> </div> <div class="card"> <div onclick="shq.cmenu(event)"> <a href="#" class="home">国内</a> <a href="#" class="international">国际</a> <a href="#" class="sport">体育</a> <a href="#" class="finance">财经</a> </div><div class="content"></div> </div> </body> </html><script language="Javascript"> var now = new Date(); document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> </noscript>

3.清晰风格的

（来自于http://bbs.blueidea.com/thread-2795660-1-1.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>简洁Tab</title> <style type="text/css">  </style> <script>  </script> </head> <body> <br><br> <div id="Tab1"> <div class="Menubox"> <ul> <li id="one1" onclick="setTab('one',1,4)" >新闻1</li> <li id="one2" onclick="setTab('one',2,4)" >新闻2</li> <li id="one3" onclick="setTab('one',3,4)">新闻3</li> <li id="one4" onclick="setTab('one',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" >新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div> </div> <br> <div id="Tab2"> <div class="Menubox"> <ul> <li id="two1" onclick="setTab('two',1,4)" >新闻1</li> <li id="two2" onclick="setTab('two',2,4)" >新闻2</li> <li id="two3" onclick="setTab('two',3,4)">新闻3</li> <li id="two4" onclick="setTab('two',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_two_1" >新闻列表1</div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div> </div> </body> </html>

4.清晰风格的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>自适应宽度tab选项卡</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <STYLE type=text/css>BODY { FONT-SIZE: 14px; FONT-FAMILY: "宋体" } OL LI { MARGIN: 8px } #con { FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px } #tags { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-TOP: 0px; HEIGHT: 23px } #tags LI { BACKGROUND:#AFEEEE; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px } #tags LI A { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #B0E0E6; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none; } #tags LI.emptyTag { BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px } #tags LI.selectTag { BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px } #tags LI.selectTag A { BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px } #tagContent { BORDER-RIGHT: #aecbd4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #aecbd4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #aecbd4 1px solid; BACKGROUND-COLOR: #fff; } .tagContent { PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px } #tagContent DIV.selectTag { DISPLAY: block } </STYLE> <META content="MSHTML 6.00.2800.1589" name=GENERATOR></HEAD> <BODY> <DIV id=con> <UL id=tags> <LI><A onClick="selectTag('tagContent0',this)" href="javascript:void(0)">标签一</A> </LI> <LI class=selectTag><A onClick="selectTag('tagContent1',this)" href="javascript:void(0)">标签二</A> </LI> <LI><A onClick="selectTag('tagContent2',this)" href="javascript:void(0)">自适应宽度的标签</A> </LI> </UL> <DIV id=tagContent> <DIV class=tagContent id=tagContent0>100天教程网第一个标签的内容</DIV> <DIV class="tagContent selectTag" id=tagContent1>第二个标签的内容</DIV> <DIV class=tagContent id=tagContent2><a href='http://www.100date.cn' title='网页设计'>100天网页设计网</a>第三个标签的内容</DIV> </DIV> </DIV> <SCRIPT type=text/javascript> function selectTag(showContent,selfObj){ // 操作标签 var tag = document.getElementById("tags").getElementsByTagName("li"); var taglength = tag.length; for(i=0; i<taglength; i++){ tag[i].className = ""; } selfObj.parentNode.className = "selectTag"; // 操作内容 for(i=0; j=document.getElementById("tagContent"+i); i++){ j.style.display = "none"; } document.getElementById(showContent).style.display = "block"; } </SCRIPT> </BODY> </HTML>

标签

#html #css #class #div #javascript