網頁選項卡
阿新 • • 發佈:2017-11-28
ear on() size pre lock left bsp pointer clas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>網頁選項卡應用</title> <script type="text/javascript" src="Jscript/jquery-1.4.2-vsdoc.js"> </script> <script type="text/javascript" src="Jscript/jquery-1.4.2.js"> </script> <style type="text/css"> body{font-size:13px} ul,li {margin:0;padding:0;list-style:none} #menu li {text-align:center;float:left;padding:5px; margin-right:2px;width:50px;cursor:pointer} #menu li.tabFocus {width:50px; font-weight:bold; background-color:#f3f2e7;border:solid 1px #666; border-bottom:0;z-index:100;position:relative} #content {width:260px;height:80px;padding:10px; background-color:#f3f2e7;clear:left; border:solid 1px #666;position:relative;top:-1px} #content li{display:none} #content li.conFocus{display:block} </style> <script type="text/javascript"> $(function() { $("#menu li").each(function(index) { //帶參數遍歷各個選項卡 $(this).click(function() { //註冊每個選卡的單擊事件 $("#menu li.tabFocus").removeClass("tabFocus"); //移除已選中的樣式 $(this).addClass("tabFocus"); //增加當前選中項的樣式 //顯示選項卡對應的內容並隱藏未被選中的內容 $("#content li:eq(" + index + ")").show() .siblings().hide(); }); }); }) </script> </head> <body> <ul id="menu"> <li class="tabFocus">家居</li> <li>電器</li> <li>二手</li> </ul> <ul id="content"> <li class="conFocus">我是家居的內容</li> <li>歡迎您來到電器城</li> <li>二手市場,產品豐富多彩</li> </ul> </body> </html>
網頁選項卡