动态创建选项卡
<!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>