最模板 - 外贸网站建设,外贸网站模板

最模板

当前位置: 首页 > 建站教程 > CMS教程 > ECShop教程 >

简单的商品列表页选择切换js及样式介绍

时间:2014-06-10 11:03来源: 作者: 点击:
(以下内容可直接加入 category.dwt 文件中,按照需求修改相应的样式即可) !-- S 已选择内容 -- table class="filter_table" id="JS_fliterTable" script type="text/javascript" _fliterShowNum = 3; /script !--{if $bran
(责任编辑:admin)

(以下内容可直接加入category.dwt文件中,按照需求修改相应的样式即可)

<!-- S 已选择内容-->
                <table class="filter_table" id="JS_fliterTable">
                    <script type="text/javascript">
                        _fliterShowNum = 3;
                    </script>
                    <!--{if $brands.1 || $price_grade.1 || $filter_attr_list}-->
                    <tr class="list selected">
                        <td class="lable">
您已选择:</td>
                        <td class="scat">
                            <span><em>{$catname}</em><a href="category.php?id={$current_cat_pr_id}"></a></span>
                            <!--{if $brands.1}-->
                            <!--{foreach from=$brands item=brand name=name}-->
                                {if $smarty.foreach.name.first}
                                <script>
                                function tiaozhuan_brand(){
                                    this.location.href='{$brand.url}';
                                    }
                                </script>
                                {/if}
                 
                                {if $brand.selected}{if $brand.brand_name neq "
全部"}
                                <span><em>{$brand.brand_name}</em><a style="cursor:hand" onclick="tiaozhuan_brand()"></a></span>
                                {/if}<!--{/if}-->
                            <!--{/foreach}-->
                            <!--{/if}-->
                <!--{if $price_grade.1}-->
            <!--{foreach from=$price_grade item=grade name=name}-->
             {if $smarty.foreach.name.first}
                <script>
                function tiaozhuan_price(){
                    this.location.href='{$grade.url}';
                    }
                </script>
                {/if}
                    <!-- {if $grade.selected} -->
                   {if $grade.price_range neq "
全部"}<span><em>{$grade.price_range}</em><a style="cursor:hand" onclick="tiaozhuan_price()"></a>{/if}</span>
                    <!-- {/if} -->
                <!--{/foreach}-->
            <!--{/if}-->
                <!--{foreach from=$filter_attr_list item=filter_attr name=name}-->
                
    <!--{foreach from=$filter_attr.attr_list item=attr name=name1}-->
    {if $smarty.foreach.name1.first}
                <script>
                function tiaozhuan_attr{$smarty.foreach.name.iteration}_1(){
                    
                    this.location.href='{$attr.url}';
                    
                    }
                </script>
               {/if}
                    <!-- {if $attr.selected} -->
                     {if $attr.attr_value neq "
全部"}<span>{$attr.attr_value}<a style="cursor:hand" onclick="tiaozhuan_attr{$smarty.foreach.name.iteration}_1()"></a></span>{/if}
                    <!-- {/if} -->
                <!--{/foreach}-->
        <!--{/foreach}-->
                  </td>
                    </tr> 
                    <!-- {/if} -->
                </table>
<!-- E
已选择内容-->



/* S
商品列表选择 css样式*/
.filter_table {
    width: 100%;
    background-color:#FFFFFF;
    
}
.filter_table td {
    padding-top: 7px;
    padding-bottom: 7px;
}
.lable {
    width: 100px;
    vertical-align: middle;
    text-align: right;
    color: #333;
    font-weight: bold;
    
}
.scat {
    padding-left: 20px;
    padding-right: 10px;
    
}
.selected .scat span {
    display: inline-block;
    height: 19px;
    line-height: 19px;
    padding:1px;
    *padding:0px;
    padding-left: 5px;
    *padding-bottom:2px;
    _padding:3px 5px 0px;
    border: 1px solid #f6406d;

}
.selected .scat span em{
    _height:14px;
    _line-height:14px;
    _zoom:1;
}
.selected .scat span a {
    display: inline-block;
    margin:3px;
    *margin:4px;
    _margin:0px;
    _margin-top:2px;
    width: 13px;
    height: 13px;
    line-height:13px;
    overflow:hidden;
    color: #fff;
    background: #f6406d url(../images/bg03.png) no-repeat;
    text-align: center;
    margin-left: 4px;
    vertical-align:top;

}
.selected .scat span a:hover {
    color: #fff!important;
    text-decoration: none
}

/* E
商品列表选择 css样式*/

 

------分隔线----------------------------
栏目列表
推荐内容