jQuery仿淘宝类别筛选导航

演示地址：http://www.wufangbo.com/demo/jquery/14/index.html

下载地址：http://www.wufangbo.com/demo/jquery/14/14.rar

主要js代码:
function addSel(obj){
var checkValue = obj.innerHTML;
var scBox = $(obj).parent().parent().attr(“id”);
$(“.checkedBox”).append(“<dd><a href=’#’ onclick=’delSel(this,\”” + scBox + “\”)’>”+ checkValue +”</a></dd>”);
$(obj).parent().remove();
return false;
}
function delSel(obj,parentId) {
var checkValue = obj.innerHTML;
$(“#” + parentId + ” div”).before(“<dd><a href=’#’ onclick=’addSel(this)’>” + checkValue + “</a></dd>”);
$(obj).parent().remove();
return false;
}

主要HTML代码:
<div class=”screen”>
<dl class=”checkedBox”>
<dt>您已选择：</dt>
<dd><a href=”#” onclick=”delSel(this,’item1′)”>撞色</a></dd>
<dd><a href=”#” onclick=”delSel(this,’item1′)”>撞电线杆</a></dd>
</dl>
<div class=”screenList”>
<dl class=”screenItem” id=”item1″>
<dt>赠品A:</dt>
<dd><a href=”#” onclick=”addSel(this)”>撞衫A</a></dd>
<dd><a href=”#” onclick=”addSel(this)”>撞头A</a></dd>
<dd><a href=”#” onclick=”addSel(this)”>撞脸A</a></dd>
<div class=”clear”></div>
</dl>
<dl class=”screenItem” id=”item2″>
<dt>赠品B:</dt>
<dd><a href=”#” onclick=”addSel(this)”>撞衫B</a></dd>
<dd><a href=”#” onclick=”addSel(this)”>撞头B</a></dd>
<dd><a href=”#” onclick=”addSel(this)”>撞脸B</a></dd>
<div class=”clear”></div>
</dl>
</div>
</div>

转载请注明：jQuery仿淘宝类别筛选导航 - 前端开发