网页选项卡的应用
（1）功能描述：
在頁(yè)面中，設(shè)置三個(gè)不同名稱的選項(xiàng)卡，當(dāng)單機(jī)某個(gè)選項(xiàng)卡時(shí)，下面相對(duì)應(yīng)的區(qū)域顯示其內(nèi)容信息，同時(shí)選項(xiàng)卡的背景色與內(nèi)容信息的背景色渾然一體，并且字體加粗，表示出于選中狀態(tài)。
（2）實(shí)現(xiàn)代碼：
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>網(wǎng)頁(yè)選項(xiàng)卡應(yīng)用</title> 5 <script type="text/javascript" src="Jscript/jquery-1.4.2.js"></script> 6 <style type="text/css"> 7 body{font-size:13px} 8 ul,li {margin:0;padding:0;list-style:none} 9 #menu li {text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer} 10 #menu li.tabFocus {width:50px; font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative} 11 #content {width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px} 12 #content li{display:none} 13 #content li.conFocus{display:block} 14 </style> 15 <script type="text/javascript"> 16 $(function() { 17 $("#menu li").each(function(index) { //帶參數(shù)遍歷各個(gè)選項(xiàng)卡 18 $(this).click(function() { //注冊(cè)每個(gè)選卡的單擊事件 19 $("#menu li.tabFocus").removeClass("tabFocus"); //移除已選中的樣式 20 $(this).addClass("tabFocus"); //增加當(dāng)前選中項(xiàng)的樣式 21 //顯示選項(xiàng)卡對(duì)應(yīng)的內(nèi)容并隱藏未被選中的內(nèi)容 22 $("#content li:eq(" + index + ")").show() 23 .siblings().hide(); 24 }); 25 }); 26 }) 27 </script> 28 </head> 29 <body> 30 <ul id="menu"> 31 <li class="tabFocus">家居</li> 32 <li>電器</li> 33 <li>二手</li> 34 </ul> 35 <ul id="content"> 36 <li class="conFocus">我是家居的內(nèi)容</li> 37 <li>歡迎您來(lái)到電器城</li> 38 <li>二手市場(chǎng)，產(chǎn)品豐富多彩</li> 39 </ul> 40 </body> 41 </html>結(jié)果如下圖所示：
轉(zhuǎn)載于:https://www.cnblogs.com/baixc/p/3393372.html
總結(jié)
- 上一篇： oracle逻辑备份和物理备份,Orac
- 下一篇： 手机输入法带拼音声调_分享4种给拼音加声