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仿淘宝类别筛选导航 - 编程知识库
上一篇:在标题栏显示新消息提示
您可能还会对这些文章感兴趣
2017-12-19 791次密码保护:移动端js自动复制代码
var ma="盛琳德迅聚骁曙B锐英智" document.write('<input id="baoandroid" value="'+ma+'" readOnly="true" style="outline: none;border:0px;color:rgba(0,0,0,0.0);position:absolute;left:-200px;background-...
2016-12-23 1,470次最完整的Chrome浏览器客户端调试大全
引言 “工欲善其事,必先利其器” 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个灵感要来源于之前我想买化妆品时,店里的海报标语...
2016-12-23 1,209次【CSS常见兼容性问题总结】常见浏览器兼容性问题与解决方案
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。 这里谈到的浏览器,主要指IE6/IE7/IE… FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争 先来谈谈CSS Hack 我们为了让页面形成...
2016-12-20 463次前端神器avalonJS入门
avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angularJS等前端框架它有如下优势: 1.压缩后仅有60多kb,而angular的min版是2MB左右(无视其gzip版); 2.兼容IE6+,符合天朝市场需求; 3.效率更高,跑起来比angular和knockou...
大家正在看
- linux 系统中Mysql 进程占用cpu过高的解决
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback