在商品列表页 我们经常会用到如下选择样式
那么我们是如何实现的呢？接下来由68ecshop中心为您解答。（以下内容可直接加入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样式*/
，生命有限，努力无限
