<!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 runat="server"> <title></title> <style type="text/css"> .quqiu { background-color: Yellow; text-decoration: none; } .haoba { background-color:ButtonFace; text-shadow: 20px; } </style></head><body> <form id="form1" runat="server"> <div> <script type="text/javascript" src="JS/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function() { pageNum(); //開始載入 pageClick(0); }); function pageNum() {//產生分頁 var alength = $("div[class=pageNumStyle]").length; var str = ""; for (var i = 0; i < alength; i++) { str += "<div style=' display:inline;'>第<a href='javascript:pageClick(" + i + ")' >" + (i + 1) + "</a>頁</div>"; } $(".zgw").append(str); //產生第一二三。。。。頁 } function pageClick(pageNum) {//點擊隱藏 $(".zgw a").each(function(i) {//控制選項卡的樣式 if (i == pageNum) { $(this).removeClass("haoba"); //先移除 $(this).addClass("quqiu"); } else { $(this).removeClass("quqiu"); //先移除 $(this).addClass("haoba"); } }); $("div[class=pageNumStyle]").each(function(i) {//控制內容域的顯隱 if (i == pageNum) { $(this).show(); } else { $(this).hide(); } }); } </script> <div> <div class="zgw"> </div> <div class="pageNumStyle"> <a>第一頁</a><br /> 春節了<br /> 春節了<br /> 春節了<br /> 春節了 </div> <div class="pageNumStyle"> <a>第二頁</a><br /> 真的春節了嗎 </div> <div class="pageNumStyle"> <a>第三頁</a><br /> 好像是真的 <br />好像是真的 </div> <div class="pageNumStyle"> <a>第四頁</a><br /> 確定是真的嗎<br /> 確定嗎<br /> 確定嗎 </div> <div class="pageNumStyle"> <a>第五頁</a><br /> 確定<br />確定<br />確定 </div> </div> </div> </form></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
