首頁 > 開發者 > CSS

HTML+JS+CSS選項卡效果[搜集整理]

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1.模仿Windows選項卡

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

 

2.模仿taobao

 

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

 

 

 

3.清晰風格的

（來自於http://bbs.blueidea.com/thread-2795660-1-1.html)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ><br /><!--<br />引用時保留下原創作者嘍,尊重任何一位原創作者,促進中國互連網進程<br />Editor:weasle</p><p>http://www.hxcgw.com</p><p>Email:weasle@163.com<br />QQ:112011531<br />--><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><br /><title>簡潔Tab</title><br /><style type="text/css"><br /><!--<br />body,div,ul,li{<br /> padding:0;<br /> text-align:center;<br />}<br />body{<br /> font:12px "宋體";<br /> text-align:center;<br />}<br />a:link{<br /> color:#00F;<br /> text-decoration:none;<br />}<br />a:visited {<br /> color: #00F;<br /> text-decoration:none;<br />}<br />a:hover {<br /> color: #c00;<br /> text-decoration:underline;<br />}<br />ul{ list-style:none;}<br />/*選項卡1*/<br />#Tab1{<br />width:460px;<br />margin:0px;<br />padding:0px;<br />margin:0 auto;}<br />/*選項卡2*/<br />#Tab2{<br />width:576px;<br />margin:0px;<br />padding:0px;<br />margin:0 auto;}<br />/*菜單class*/<br />.Menubox {<br />width:100%;<br />background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);<br />height:28px;<br />line-height:28px;<br />}<br />.Menubox ul{<br />margin:0px;<br />padding:0px;<br />}<br />.Menubox li{<br /> float:left;<br /> display:block;<br /> cursor:pointer;<br /> width:114px;<br /> text-align:center;<br /> color:#949694;<br /> font-weight:bold;<br /> }<br />.Menubox li.hover{<br /> padding:0px;<br /> background:#fff;<br /> width:116px;<br /> border-left:1px solid #A8C29F;<br /> border-top:1px solid #A8C29F;<br /> border-right:1px solid #A8C29F;<br />background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);<br /> color:#739242;<br /> font-weight:bold;<br /> height:27px;<br />line-height:27px;<br />}<br />.Contentbox{<br /> clear:both;<br /> margin-top:0px;<br /> border:1px solid #A8C29F;<br /> border-top:none;<br /> height:181px;<br /> text-align:center;<br /> padding-top:8px;<br />}<br />--><br /></style><br /><script><br /><!--<br />/*第一種形式 第二種形式 更換顯示樣式*/<br />function setTab(name,cursel,n){<br /> for(i=1;i<=n;i++){<br /> var menu=document.getElementById(name+i);<br /> var con=document.getElementById("con_"+name+"_"+i);<br /> menu.className=i==cursel?"hover":"";<br /> con.style.display=i==cursel?"block":"none";<br /> }<br />}<br />//--><br /></script><br /></head><br /><body><br /><br><br><br /><div id="Tab1"><br /><div class="Menubox"><br /><ul><br /> <li id="one1" onclick="setTab('one',1,4)" >新聞1</li><br /> <li id="one2" onclick="setTab('one',2,4)" >新聞2</li><br /> <li id="one3" onclick="setTab('one',3,4)">新聞3</li><br /> <li id="one4" onclick="setTab('one',4,4)">新聞4</li><br /></ul><br /></div><br /> <div class="Contentbox"><br /> <div id="con_one_1" >新聞列表1</div><br /> <div id="con_one_2" style="display:none">新聞列表2</div><br /> <div id="con_one_3" style="display:none">新聞列表3</div><br /> <div id="con_one_4" style="display:none">新聞列表4</div><br /> </div><br /></div><br /><br><br /><div id="Tab2"><br /><div class="Menubox"><br /><ul><br /> <li id="two1" onclick="setTab('two',1,4)" >新聞1</li><br /> <li id="two2" onclick="setTab('two',2,4)" >新聞2</li><br /> <li id="two3" onclick="setTab('two',3,4)">新聞3</li><br /> <li id="two4" onclick="setTab('two',4,4)">新聞4</li><br /></ul><br /></div><br /> <div class="Contentbox"><br /> <div id="con_two_1" >新聞列表1</div><br /> <div id="con_two_2" style="display:none">新聞列表2</div><br /> <div id="con_two_3" style="display:none">新聞列表3</div><br /> <div id="con_two_4" style="display:none">新聞列表4</div><br /> </div><br /></div><br /></body><br /></html>

 

 

4.清晰風格的

 

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

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
udemy html css javascript html and css book html and css duckett search box html css html css editor html css crash course html css developer jobs
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More