动态生存tab,并且在一个页面可以有多个选项卡集合

时间：2010-09-28 来源：周行天下

　　需求，页面的由模块组成，在后台发布。因此，可以发布多个模块，并且每个模块都含有tab,并且tab的个数不固定。

多的不说了，先上代码，然后具体解释

<div id="tabContainer" runat="server">
        <div id="articlehead">
            <div style="text-align: right;" id='tabsp<%= random %>'>
                <h1>
                    <% if (EnableShowTitle)
                       { %><%= ModuleName%><% } %></h1>
                <asp:Repeater ID="rptTabs" runat="server" EnableViewState="False">
                    <ItemTemplate>
                        <span id='tabs<%# Container.ItemIndex + 1%><%# random %>'><a target="_blank" href="../lanmu/<%=ModAlias_ID%>/<%# Eval("TabCateID")%>.html">
                            <%# Eval("TabName")%></a></span></ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
        <div id="articleBody">
            <div id='tabsbody<%= random %>'>
                <asp:Repeater ID="rptBody" runat="server" EnableViewState="false">
                    <ItemTemplate>
                        <div class='tabs<%# Container.ItemIndex + 1%><%# random %>'>
                            <asp:Repeater ID="rptArticle" runat="server">
                                <HeaderTemplate>
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <tr>
                                        <td align="left">
                                            <a id="cate" target="_blank" runat="server"></a><a id="article" target="_blank" runat="server">
                                                <span id="articleName" runat="server"></span></a>
                                        </td>
                                        <td align="right">
                                            <samp id="articleSource" runat="server">
                                            </samp>
                                        </td>
                                    </tr>
                                </ItemTemplate>
                                <FooterTemplate>
                                    </table>
                                </FooterTemplate>
                            </asp:Repeater>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
</div>

上面标红的地方就是关键，在后台生成一个随机数random,在前台，把这个随机数和id进行结合，这样就可以在一个页面可以有多个选项卡。

样式

.articleShow
{

        margin: 5px 5px 0 5px;
        border: 1px solid #e1e1e1;
        overflow: hidden;

}

.articleShow #articlehead{
        padding-right: 0px;
        border-bottom: 1px solid #CCCCCC;
        padding-left: 0px;
        background: url(../images/main_font_bg.jpg.ashx) repeat-x top;
        text-align:right; 
        padding: 10px 5px 3px;
        text-indent: 10px;
}
    

.articleShow #articlehead  h1{
        float:left;
        font-family: 微软雅黑;
        font-size:14px;float:left;
        margin:0 0;
        padding:0 0;
}
.articleShow #articlehead  span{
        background-color: #EFEFEF;
        border: 1px solid #CCCCCC;
        cursor: pointer;
        margin: 0 0;
        padding: 4px 15px;
        padding: 5px\9 15px;
        *padding: 4px 15px;
        _padding: 3px 15px;
        font-size:13px;
}
    
.articleShow #articlehead  span.current{
        background-color: #FAFAFA;
        border-bottom-color: #fafafa;
}
    
.articleShow #articlehead  a{
        float: none;
        line-
        
        color: #000;
        text-decoration: none;
}

.articleShow #articleBody{
        padding : 5px 7px 5px 7px;
         /*clear: left; min-*/
}

.articleShow #articleBody  a{
        font-weight: normal;
        color: #000;
        text-decoration: none;
        font-size: 12px;
        
        line-
        padding: 0 0px; /*  word-wrap:break-word;word-break:break-all*/
        float:left;
}

.articleShow #articleBody a:hover
{
        color: #09c;
}

.articleShow为这个模块的样式。

<script type="text/javascript">
    $(document).ready(function() {
        $("#tabsp<%= random %> span:first").addClass("current"); //为第一个SPAN添加当前效果样式
        $("#tabsbody<%= random %> div:not(:first)").hide(); //隐藏其它的UL
        $("#tabsp<%= random %> span").mouseover(function() {
            $("#tabsp<%= random %> span").removeClass("current"); //去掉所有SPAN的样式
            $(this).addClass("current");
            $("#tabsbody<%= random %> div").hide();
            $("." + $(this).attr("id")).show();
        });
    });
</script>

引用jquery先，然后在dom加载完后，就可以了。

如果有朋友愿意实验，完全可以自己把代码抠下来。

差不多可以对付所有的情况了。