<br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode1'));"><u>複製程式碼</u></span></div>程式碼如下:</div> <div class="msgborder" id="phpcode1"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>列表选项卡</title> <br><style type="text/css"> <br>body{ <br>margin:0px; <br>padding:0px; <br>} <br>#main{ <br>width:310px; <br>border:1px solid #C8C8CC; <br>margin-left:auto; <br>margin-right:auto; <br>margin-top:50px; <br>} <br>.main_title{ <br>width:310px; <br>border-bottom:1px solid #C8C8CC; <br>height:30px; <br>} <br>#main div .chang{ <br>border:1px solid #C8C8CC; <br>float:left; <br>width:153px; <br>height:26px; <br>text-align:center; <br>padding-top:4px; <br>cursor:pointer; <br>} <br>.main_head{ <br>width:310px; <br>height:25px; <br>background-color:#FFF4F8; <br>} <br>.main_head font{ <br>font-size:13px; <br>color:#808080; <br>margin-top:5px; <br>} <br>.main_content{ <br>width:310px; <br>border-top:1px solid #808080; <br>} <br>.main_content ul{ <br>margin-left:-30px; <br>margin-top:5px; <br>width:290px; <br>} <br>.main_content ul li{ <br>list-style-type:none; <br>font-size:13px; <br>color:#2464B2; <br>border-bottom:1px dotted #808080; <br>line-height:27px; <br>} <br>.main_content ul li a{ <br>font-size:13px; <br>color:#2464B2; <br>text-decoration:none; <br>} <br>.main_content ul li a:hover{ <br>text-decoration:underline; <br>} <br>#main div ul.main_content_chang{ <br>width:290px; <br>position:relative; <br>z-index:100; <br>top:0px; <br>left:0px; <br>display:block; <br>} <br>#main div ul{ <br>position:relative; <br>display:none; <br>} <br></style> <br><script type="text/javascript" src="js/jquery-1.9.1.js"></script> <br><script type="text/javascript"> <br>$(function(){ <br>$(".chang").each(function(index){ <br>$(this).click(function(){ <br>$(this).css("background-color","#E02D29"); <br>$(this).siblings("div").css("background-color","#fff"); <br>$("#main div ul").removeClass("main_content_chang"); <br>$(".main_content ul:eq("+index+")").show().siblings("ul").hide(); <br>}) <br>}) <br>}) <br></script> <br></head> <br><body> <br><div id="main"> <br><div class="main_title"> <br><div class="chang" style="background:#E02D29">实时热点</div> <br><div class="chang" style="float:right;">七日关注</div> <br></div> <br><div class="main_content"> <br><!-----------即時熱點--------------> <br><ul class="main_content_chang"> <br><li> <img src="img/1_1.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">來自星星你的</a> </li> <br><li> <img src="img/1_2.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">私人客製化的</a> </li> <br><li> <img src="img/3_1.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">全能星戰的</a> </li> <br><li> <img src="img/1_4.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">加多寶陪千萬的</a> </li> <br><li> <img src="img/1_5.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">女生廁所產子之後上課的</a> </li> <br><li> <img src="img/1_6.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">圓通奪命快遞始末的</a> </li> <br><img src="img/1_7.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">翻版張柏芝的</a> <br><li> <img src="img/1_8.jpg%20" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">李彥鵬說謊的</a> </li> <br><li> <img src="img/1_9.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">1.7億元存摺的</a> </li> <br><li> <img src="img/1_10.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">90後為討好男友溺死親生女的 a></a> </li> <br><li style="text-align:right; border-bottom-style:none"><a href="#" style="font-size:15px">查看完整榜單</a></li> <br> </ul> <br><!-----------七日關注---------------- ----> <br><ul> <br><li> <img src="img/1_1.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">南京出土神秘寶劍的</a> </li> <br><li> <img src="img/1_2.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">民政局假結婚證書的</a> </li> <br><li> <img src="img/3_1.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">沃爾瑪道歉的</a> </li> <br><li> <img src="img/1_4.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > 買發卡的女孩的</li> <br><li> <img src="img/1_5.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">假茅台騙兩億貸款的</a> </li> <br><li> <img src="img/1_6.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">男子收到亡妻聖誕大禮的</a> </li> <br><li> <img src="img/1_7.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">全球最美的100的</a> </li> <br><li> <img src="img/1_8.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">隕石八千萬</a> </li> <br><li> <img src="img/1_9.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">安培參拜靖國神社</a> </li> <br><li> <img src="img/1_10.jpg" alt="html css jquery模仿搜尋風雲榜選項卡效果有截圖_HTML/Xhtml_網頁製作" > <a href="#">春晚舞台曝光</a> </li> <br><li style="text-align:right; border-bottom-style:none"><a href="#" style="font-size:15px">看完整名單</a></li> <br> </ul> <br> </div> <br> </div> <br>
