自己写的简单选项卡,呵呵

    <div id="xgc"></div>
   
        <div class="orderHead">
   <ul>
    <li id="jbxx_panel" class="active">基本信息</li>
    <li id="sp_panel">商品</li>
    <li id="stkjl_panel">收退款记录</li>
    <li id="fthjl_panel">发退货记录</li>
    <li id="yhfa_panel">优惠方案</li>
    <li id="ddbz_panel">订单备注</li>
    <li id="ddrz_panel">订单日志</li>
    <li id="ddly_panel">订单留言</li>
   </ul>
  </div>
    <script type="text/javascript">
        $(".orderHead li").click(function () {
            var curpre = $(this).attr("id");
            var curPanel = "#" + curpre.split("_")[0] + "Panel";
            var temp, result, resArray;
            var myObject, myAttribute;

            $(".orderHead li").each(
                function (index, domEle) {

                    temp = "#" + domEle.id.split("_")[0] + "Panel";

                    if (temp == curPanel) {
                        if ($(temp).attr("class") == "panelHidden") {
                            $(temp).attr("class", "panelDisplay")
                        }
                    }
                    else {
                        $(temp).attr("class", "panelHidden")
                    }


                    if ($(temp).attr("class") == "panelDisplay") {
                        if (result == "undefined") {
                            result = temp;
                        }
                        else {
                            result = result + "," + temp;
                        }
                    }
                }
            );

                $("#xgc").html(result);

        });
    </script>    

 


<div id="jbxxPanel" class="panelDisplay">
<!--基本信息开始-->

<!--基本信息结束-->
</div>

<!--商品开始-->
<div id="spPanel" class="panelHidden">商品面板</div>
<!--商品结束-->

<!--收退款记录开始-->
<div id="stkjlPanel" class="panelHidden">收退款记录面板</div>
<!--收退款记录结束-->

<!--发退货记录开始-->
<div id="fthjlPanel" class="panelHidden">发退货记录面板</div>
<!--发退货记录结束-->

<!--优惠方案开始-->
<div id="yhfaPanel" class="panelHidden">优惠方案面板</div>
<!--优惠方案结束-->

<!--订单备注开始-->
<div id="ddbzPanel" class="panelHidden">订单备注面板</div>
<!--订单备注结束-->

<!--订单日志开始-->
<div id="ddrzPanel" class="panelHidden">订单日志面板</div>
<!--订单日志结束-->

<!--订单留言开始-->
<div id="ddlyPanel" class="panelHidden">订单留言面板</div>
<!--订单留言结束-->

posted @ 2012-02-17 18:33  szjdw  阅读(126)  评论(0编辑  收藏  举报