jquery多选项卡效果实例代码(附效果图)

复制代码 代码如下:

<script type="text/javascript">
    $(function() {
        $(".designerspanel").each(function(){
            $(this).find(".tabspanel #show:not(:first)").hide();
        });

        $(".designerspanel li").click(function(){   
            idname=$(this).parents('.designerspanel').attr('id');
            current=$("#"+idname+" li:eq(0)").attr('class');
            current=current.replace("black","");
            $("#"+idname+" li").addClass("black");
            $(this).removeClass("black").addClass(current);
            $("#"+idname+" #show").hide();
            $("#"+idname+" #show").eq($("#"+idname+" li").index(this)).show();
        }).css("cursor", "pointer");
    })
</script>

附上html代码

复制代码 代码如下:

<div>
    <a></a>
    <div>Designer Name Order A to G</div>
    <div>
        <ul>
        <li><span>Designer Name A</span></li>
        <li><span>Designer Name B</span></li>
        <li><span>Designer Name C</span></li>
        <li><span>Designer Name D</span></li>
        <li><span>Designer Name E</span></li>
        <li><span>Designer Name F</span></li>
        <li><span>Designer Name G</span></li>
        </ul>
        <div>
            <div>
                <div></div>
                <div>
                    <!--{foreach from=$A item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div></div>
            </div>
            <div></div>
            <div></div>
        </div>

        <div>
            <div>
                <div></div>
                <div>
                    <!--{foreach from=$B item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div></div>
            </div>
            <div></div>
            <div></div>
        </div>

        <div>
            <div>
                <div></div>
                <div>
                    <!--{foreach from=$C item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div></div>
            </div>
            <div></div>
            <div></div>
        </div>

        <div>
            <div>
                <div></div>
                <div>
                    <!--{foreach from=$D item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div></div>
            </div>
            <div></div>
            <div></div>
        </div>

       
        <div>
            <div>
                <div></div>
                <div>
                    <!--{foreach from=$E item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div></div>
            </div>
            <div></div>
            <div></div>
        </div>

        <div>
            <div>
                <div></div>
                <div>
                    <!--{foreach from=$F item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div></div>
            </div>
            <div></div>
            <div></div>
        </div>

        <div>
            <div>
                <div></div>
                <div>
                    <!--{foreach from=$G item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div></div>
            </div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>