选项卡 tab

方法描述
鼠标移动到不同的tab，切换相对应的内容
应用场景
主要应用在商品分类推荐模块中，点击不同的标题，切换相对应的内容。
方法参数
名称 值 类型 描述
调用语句 <div class="j-module" module-function="tab" module-param="{参数一:值,参数二:值,...>模板代码</div> 方法调用 支持传入参数
参数
标题节点 tabNode string 如：{tabNode:’.jSortTab span’}
内容节点 tabContent string 如：{tabContent:’.jSortContent ul’}
当前标识 arrow string 如：{arrow:’.jSortTabArrow’}
当前样式 defaultClass string 如{defaultClass:’current’}
标题宽度 setUpWidth number 值：0，1；其中0表示平均分配宽度，1表示默认宽度；如{setUpWidth:0}

<div class="j-module" module-function="tab,autoWidth" module-param="{}">
    <div class="jSortTabArrow"><b></b></div>
    <div class="jSortTab">
        #foreach($!categoryRec in $!categoryRecList) 
            <span>$!categoryRec.categoryName</span>
        #end
    </div>
    <div class="jSortContent">
        #foreach($!categoryRec in $!categoryRecList)
        <ul>
            #foreach($!goods in $!categoryRec.goodsList)
            <li>
                <div class="jItem">
                    <div class="jPic">
                        <a title="$!goods.wname" href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank"><img width="100" height="100" src="$!jshopCommon.getImage($!goods.imageurl,2)" alt="$!goods.wname"></a>
                    </div>
                    <div class="jGoodsInfo">
                        <div class="jDesc">
                            <a title="$!goods.wname" href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">$!goods.wname</a>
                        </div>
                        <div class="jPrice">
                            <div class="jdPrice">
                                <span class="jRmb">￥</span>
                                <span class="jdNum">$!jshopPrice.getJdPrice($!goods.goodsId)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            #end
        </ul>
        #end
    </div>
</div>

.userjSortRecommend{}
.userjSortRecommend .mt{}
.userjSortRecommend .mc{background:#fff; overflow:hidden; position:relative;}
.userjSortRecommend .jSortTab{border-bottom:2px solid #AAAAAA; overflow:hidden; position:relative; height:32px;}
.userjSortRecommend .jSortTab span{float:left; width:158px; padding:7px 0; height:18px; text-align:center; font-size:14px; font-weight:bold; color:#666;}
.userjSortRecommend .jSortTab span.current{color:#E4393C;}
.userjSortRecommend .jSortTabArrow{width:158px; position:absolute; z-index:1; top:25px; left:0; height:7px; border-bottom:2px solid #E4393C; overflow:hidden; text-align:center;}
.userjSortRecommend .jSortTabArrow b{display:inline-block; margin-top:-8px; width:0; height:0; border-style:dashed dashed solid dashed; border-width:10px; border-color:transparent transparent #E4393C transparent; overflow:hidden; zoom:1; font-size:0;}
.userjSortRecommend .jSortContent{overflow:hidden; border-right:1px solid #F1F1F1; border-bottom:1px solid #F1F1F1; margin-top:-1px; height:100%;}
.userjSortRecommend .jSortContent ul{overflow:hidden; display:none;}
.userjSortRecommend .jSortContent ul.current{display:block;}
.userjSortRecommend li{width:157px; overflow:hidden; float:left;}
.userjSortRecommend .jItem{border-left:1px solid #F1F1F1; border-top:1px solid #F1F1F1; padding:5px 10px 0;}
.userjSortRecommend .jPic{height:100px; padding:5px 0; text-align:center;}
.userjSortRecommend .jGoodsInfo{padding-bottom:5px;}
.userjSortRecommend .jDesc{height:32px; line-height:1.3; overflow:hidden;}
.userjSortRecommend .jDesc a{color:#666;}
.userjSortRecommend .jDesc a:hover{color:#E4393C; text-decoration:underline;}
.userjSortRecommend .jdPrice{color:#E4393C; height:18px; overflow:hidden;}
.userjSortRecommend .jdPrice span{float:left;}
.userjSortRecommend .jdPrice .jRmb{font-size:12px;}
.userjSortRecommend .jdPrice .jdNum{font-size:15px;}
.userjSortRecommend .jdPrice .jdNumNo{font-size:12px;}