网店常用的条件筛选js特效，用户鼠标点击下面筛选条件后自动添加到筛选项中，实用的筛选js特效代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>模拟网店常用条件筛选效果_武鸣人</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background-color:#FFF;color:#000;text-align:center;font:normal 12px Arial,Helvetica,sans-serif;}
ul,li{list-style-type:none;}
img{border:0;}
h1,h2,h3,h4,h5,h6,div,p,li,td,th{text-align:left;}
a:link,a:visited,a:hover{text-decoration:none;color:#000;padding:3px;}
a:hover{text-decoration:underline;background-color:#F1F1F1;color:#C80000;}
.wuming_ren{margin:10px auto;width:96%;padding:5px;border:1px solid #c1c1c1;overflow:hidden;}
.hd,.bd{margin:0 auto;width:100%;overflow:hidden;}
.hd{height:30px;line-height:30px;background-color:#F1F1F1;overflow:hidden;}
.hd h2{float:left;font-size:14px;text-indent:10px;}
.hd span{float:left;margin-right:5px;margin-top:3px;display:inline;height:16px;line-height:16px;padding:3px;border:1px solid #ccc;}
.bd h3{float:left;width:60px;font-size:12px;text-align:right;padding:5px 0;height:24px;line-height:24px;overflow:hidden;}
.bd ul{float:left;width:530px;overflow:hidden;padding:5px 0;}
.bd li{float:left;height:24px;line-height:24px;padding-right:10px;overflow:hidden;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="wuming_ren" id="select">
<div class="hd" id="www_wuming_ren"><h2>您选择的东西：</h2></div>
<div class="bd">
<h3 id="size">尺寸：</h3>
<ul>
<li><a href="#S">S(小号)</a></li>
<li><a href="#M">M(中号)</a></li>
<li><a href="#L">L(大号)</a></li>
<li><a href="#XL">XL(加大号)</a></li>
<li><a href="#XXL">XXL(加加大号)</a></li>
</ul>
</div>
<div class="bd">
<h3 id="color">颜色：</h3>
<ul>
<li><a href="#white">白色</a></li>
<li><a href="#black">黑色</a></li>
<li><a href="#red">红色</a></li>
<li><a href="#yellow">黄色</a></li>
<li><a href="#orange">橙色</a></li>
<li><a href="#blue">蓝色</a></li>
</ul>
</div>
<div class="bd">
<h3 id="prize">价格：</h3>
<ul>
<li><a href="#50">50</a></li>
<li><a href="#50-100">51-100</a></li>
<li><a href="#101-200">101-200</a></li>
<li><a href="#201-300">201-300</a></li>
<li><a href="#301-400">301-400</a></li>
<li><a href="#401">400以上</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
(function(){
var doc = document,
byId = function(el){
if (el.tagName && el.nodeType === 1) {
return el;
}
else {
if (doc.getElementById) {
return doc.getElementById(el);
}
else {
return false;
}
}
},
stopEvent = function(ev){
stopPropagation(ev);
preventDefault(ev);
},
stopPropagation = function(ev){
if (ev.stopPropagation) {
ev.stopPropagation();
}
else {
ev.cancelBubble = true;
}
},
preventDefault = function(ev){
if (ev.preventDefault) {
ev.preventDefault();
}
else {
ev.returnValue = false;
}
},
regexCache = {},
getRegExp = function(str, flags) {
flags = flags || '';
regexCache = regexCache || {};
if (!regexCache[str + flags]) {
regexCache[str + flags] = new RegExp(str, flags);
}
return regexCache[str + flags];
},
hasClass = function(node, className){
var re = getRegExp('(?:^|\\s+)' + className + '(?:\\s+|$)');
return re.test(node.className);
},
byClass = function(className, tag, root){
var elems = [],
i,
tempCnt = byId(root || doc).getElementsByTagName(tag),
len = tempCnt.length;
for (i = 0; i < len; ++i) {
if (hasClass(tempCnt[i], className)) {
elems.push(tempCnt[i]);
}
}
if (elems.length < 1) {
return false;
}
else {
return elems;
}
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function selectedItem(){
var root = byId('select'),
container = null,
header = null,
titles = null,
lists = null,
items = null,
li = null,
i =0,
len = 0;
if (!root) {
return false;
}
header = byId('www_wuming_ren');
containers = byClass('bd', 'div', root);
lists = root.getElementsByTagName('ul');
titles = root.getElementsByTagName('h3');
for (len = lists.length; i < len; i += 1) {
(function(idx){
var list = lists[idx], items = list.getElementsByTagName('li'), j = 0, leng = 0;
for (leng = items.length; j < leng; j += 1) {
items[j].onclick = function(index){
return function(event){
var evt = event || window.event,
ul = lists[idx],
lis = ul.getElementsByTagName('li'),
el = lis[index],
len = lis.length,
container = containers[idx],
title = titles[idx].innerHTML,
info = title + (el.textContent || el.innerText),
addInfo = doc.createElement('span');
if(len>0){
addInfo.innerHTML = info;
header.appendChild(addInfo);
ul.removeChild(el);
}
selectedItem();
stopEvent(evt);
};
}(j);
}
})(i);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
selectedItem();
})();
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处