装修交流群：142419044
首页>伪属性方法库> 常用方法> 【选项卡 tab】 方法详情页
选项卡 tab
JSHOP 2013-12-27 14:11:04
评论：0 浏览：23946
方法描述
鼠标移动到不同的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}
可使用模块
商品分类推荐
更多效果等您发挥
商品分类推荐DEMO一 商品分类推荐DEMO二
带移动箭头的切换效果
特价商品 今日推荐 季度热销 
<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;}
纯色切换
特价商品 今日推荐 季度热销 
<div class="j-module" module-function="tab,autoWidth" module-param="{}">
    <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 href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">
                            <img src="$!jshopCommon.getImage($!goods.imageurl,2)" alt="$!goods.wname" height="160" width="160" />
                        </a>
                    </div>
                    <div class="jGoodsInfo">
                        <div class="jDesc" title="$!goods.wname $!goods.advertWord">
                            <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">$!goods.wname</a>
                            <span class="jSlogan">$!goods.advertWord</span>
                        </div>                          
                       <div class="jPrice">
                            <div class="jSalePrice">
                                <span class="jRmb">&yen;</span>
                                $!jshopPrice.getSkuPrice($!goods.goodsId)
                            </div>
                            <div class="jdPrice">
                                <span class="jRmb">&yen;</span>
                                $!jshopPrice.getJdPrice($!goods.goodsId)
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            #end
        </ul>
        #end
    </div>
</div>
.userjSortRecommend{}
.userjSortRecommend .mt{}
.userjSortRecommend .mc{background:#fff; overflow:hidden; position:relative;}
.userjSortRecommend .jSortTab{overflow:hidden; position:relative; height:28px; background:#cbcbcb;}
.userjSortRecommend .jSortTab span{float:left; width:100px; height:28px; line-height:28px; text-align:center; font-size:15px; font-weight:bold; color:#fff; background:#cbcbcb;}
.userjSortRecommend .jSortTab span.current{color:#fff; background:#be312e;}
.userjSortRecommend .jSortContent{overflow:hidden; height:100%;  border:solid 1px #cbcbcb;}
.userjSortRecommend .jSortContent ul{padding:3px 0; overflow:hidden; display:none;}
.userjSortRecommend .jSortContent ul.current{display:block;}
.userjSortRecommend li{float:left; width:185px; padding:5px 0; margin:0 5px; overflow:hidden; display:inline; position:relative;}
.userjSortRecommend .jItem{height:auto; background:#fff;}
.userjSortRecommend .jPic{position:relative; text-align:center; background:#fff; _height:100%;}
.userjSortRecommend .jPic img{vertical-align:top;}
.userjSortRecommend .jPic a{padding:5px 0; width:160px; height:160px; display:block; margin:0 auto;}
.userjSortRecommend .jGoodsInfo{overflow:hidden; position:relative; padding:5px; text-align:center;}
.userjSortRecommend .jDesc{height:14px; line-height:1.3; overflow:hidden;}
.userjSortRecommend .jDesc a{color:#020202; text-decoration:none;}
.userjSortRecommend .jDesc a:hover{text-decoration:underline;}
.userjSortRecommend .jDesc .jSlogan{color:#ff0000!important;}
.userjSortRecommend .jPrice{height:34px; overflow:hidden;}
.userjSortRecommend .jPrice .jsNumNo{text-decoration:none;}
.userjSortRecommend .jdPrice{color:#e60215; font-weight:bold; height:20px; font-size:14px; overflow:hidden;}
.userjSortRecommend .jdPrice .jRmb{}
.userjSortRecommend .jdPrice .jText{}
.userjSortRecommend .jdPrice .jdNum{}
.userjSortRecommend .jdPrice .jdNumNo{}
.userjSortRecommend .jSalePrice{color:#cdcdcd; text-decoration:line-through; overflow:hidden; clear:both;}
.userjSortRecommend .jSalePrice .jRmb{ text-decoration:line-through;}
.userjSortRecommend .jSalePrice .jsNum{text-decoration:line-through;}
Behavior
功能类
模板特效
名称 值 类型 描述