效果如图：
修改方法：
在网站模板目录下打开 goods.dws 查找如下代码：
<!-- {* 开始循环所有可选属性 *} --> <!-- {foreach from=$specification item=spec key=spec_key} --> <li class="padd loop"> <strong>{$spec.name}:</strong><br /> <!-- {* 判断属性是复选还是单选 *} --> <!-- {if $spec.attr_type eq 1} --> <!-- {if $cfg.goodsattr_style eq 1} --> <!-- {foreach from=$spec.values item=value key=key} --> <label for="spec_value_{$value.id}"> <input type="radio" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" {if $key eq 0}checked{/if} onclick="changePrice()" /> {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br /> <!-- {/foreach} --> <input type="hidden" name="spec_list" value="{$key}" /> <!-- {else} --> <select name="spec_{$spec_key}" onchange="changePrice()"> <!-- {foreach from=$spec.values item=value key=key} --> <option label="{$value.label}" value="{$value.id}">{$value.label} {if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if}{if $value.price neq 0}{$value.format_price}{/if}</option> <!-- {/foreach} --> </select> <input type="hidden" name="spec_list" value="{$key}" /> <!-- {/if} --> <!-- {else} --> <!-- {foreach from=$spec.values item=value key=key} --> <label for="spec_value_{$value.id}"> <input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" /> {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br /> <!-- {/foreach} --> <input type="hidden" name="spec_list" value="{$key}" /> <!-- {/if} --> </li> <!-- {/foreach} --> <!-- {* 结束循环可选属性 *} -->
修改为如下代码：
<!-- {* 开始循环所有可选属性 *} --> <!-- {foreach from=$specification item=spec key=spec_key} --> <li class="padd"> <!-- {* 判断属性是复选还是单选 *} --> <!-- {if $spec.attr_type eq 1} --> <!-- {if $cfg.goodsattr_style eq 1} --> <div class="catt"><strong class="catb">{$spec.name}:</strong> <!-- {foreach from=$spec.values item=value key=key} --> <a {if $key eq 0}class="cattsel"{/if} onclick="changeAtt(this)" href="javascript:;" name="{$value.id}">{$value.label}<input style="display:none" id="spec_value_{$value.id}" type="radio" name="spec_{$spec_key}" value="{$value.id}" {if $key eq 0}checked{/if} /></a> <!-- {/foreach} --> </div> <input type="hidden" name="spec_list" value="{$key}" /> <!-- {/if} --> <!-- {else} --> <div class="blank10"></div> <!-- {foreach from=$spec.values item=value key=key} --> <label for="spec_value_{$value.id}"> <input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" /> {$value.label}</label> <!-- {/foreach} --> <input type="hidden" name="spec_list" value="{$key}" /> <!-- {/if} --> </li> <!-- {/foreach} --> <!-- {* 结束循环可选属性 *} -->
再在网站模板CSS里添加如下CSS
/*--------------颜色选择器CSS添加-------------*/ .catt .catb { height:auto; overflow:hidden; line-height:30px; float:left; } .catt { width:100%; height:auto; overflow:hidden; padding-bottom:5px; text-decoration:none; } .catt a { border:#c8c9cd 1px solid; text-align:center; background-color:#fff; margin-left:5px; margin-top:6px; padding-left:10px; padding-right:10px; display:block; white-space:nowrap; color:#000; text-decoration:none; float:left; } .catt a:hover { border:#ff6701 2px solid; margin:-1px; margin-left:4px; margin-top:5px; } .catt a:focus { outline-style:none; } .catt .cattsel { border:#ff6701 2px solid; margin:-1px; background:url("images/test.gif") no-repeat bottom right; margin-left:4px; margin-top:5px; } .catt .cattsel a:hover { border:#ff6701 2px solid; margin:-1px; background:url("images/test.gif") no-repeat bottom right; }
再把如下图片另存为 test.gif 放入网站模板图片文件夹里
最后，在页面内找到<script>这样的东西,在其后面添加一个js函数
function changeAtt(t) { t.lastChild.checked='checked'; for (var i = 0; i<t.parentNode.childNodes.length;i++) { if (t.parentNode.childNodes[i].className == 'cattsel') { t.parentNode.childNodes[i].className = ''; } } t.className = "cattsel"; changePrice(); }
转载于:https://www.cnblogs.com/wangblognet/archive/2013/04/11/3014112.html
相关资源：数据结构—成绩单生成器