首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

动态创设选项卡

2013-10-09 
动态创建选项卡!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/

动态创建选项卡

<!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>

热点排行