纯js+css3实现商品类目功能-网页编程网

当前位置：主页 >> DIV+CSS >> 正文

纯js+css3实现商品类目功能

阅读：4016 输入：2020-06-13 21:38:33

}
#box dl{
height: 50px;
line-height: 50px;
margin: 0 20px;
border-bottom: 1px dashed #fa;
}
#box dt{
float: left;
color: blue;
}
#box dd{
float: left;
font-size: 14px;
color: #252525;
margin:0 10px; 
cursor: pointer;
}
#box dd.active{
color:red;
}
#box dl.select{
background-color: #ebe4e4;
margin:0;
padding: 0;
}
#box dl.select dd{
border: 1px solid #c4284d;
line-height: 25px;
margin-top: 13px; 
padding: 0 2px 0 10px;
cursor: auto;
}   
#box dl.select dd span{
width: 20px;
height: 20px;
display: inline-block;/*否则不能设置宽高*/
background: #c4284d;
line-height: 20px;
text-align: center;
color: white;
margin-left: 10px;
cursor: pointer;
}   
</style>
</head>
<body>
<div id="box">
<dl>
<dt>品种</dt>
<dd>联想</dd>
<dd>三星</dd>
<dd>华为</dd>
</dl>
<dl>
<dt>价格</dt>
<dd>3000-4000</dd>
<dd>5000-6000</dd>
<dd>7000-9000</dd>
</dl>
<dl>
<dt>尺寸</dt>
<dd>8.9inch</dd>
<dd>15inch</dd>
<dd>21inch</dd>
</dl>
<dl style="border:none;">
<dt>显卡</dt>
<dd>儿童</dd>
<dd>集成显卡</dd>
<dd>核心显示</dd>
</dl>   
<dl class="select">
<dt>已选条件</dt>

</dl>       
</div>
<script>
var dls=document.querySelectorAll('dl:not(.select)');
var selected=document.querySelector('.select');
for(var i=0;i<dls.length;i++){
dls[i].mark=false;//其值为true创建
select(i);
}
function select(n){
var dds=dls[n].querySelectorAll('dd');
var prev=null;//上一次选中的元素
var dd=null;
for (var i=0;i<dds.length;i++){
dds[i].onclick=function(){
    
/*  for(var i=0;i<dds.length;i++){
        dds[i].className='';
    }
*/
if(prev){prev.className='';}
//以上可简写与prev && (prev.className='')
    this.className='active';
    prev=this;
    var parent=this.parentNode;
    if(!parent.mark){
        //对应的标签未创建
        dd=document.createElement('dd');
        dd.innerHTML=this.innerHTML;
        selected.appendChild(dd);
        parent.mark=true;
    }else{
        dd.innerHTML=this.innerHTML;
    }
    var This=this;//当前的dd，为了在span中删除样式
    var span=document.createElement('span');
    span.innerHTML='X';
    span.onclick=function(){
        selected.removeChild(dd);
        parent.mark=false;
        This.className='';/*用prev也行*/
    }
    dd.appendChild(span);

}//for dds
}
}
</script>
</body>

上一篇：纯css中video做背景的网站
下一篇：面向对象实现js+ccs3幻灯特效带有内容提示

相关阅读: 通用多栏目商品展示模板; css3中grid实现键盘布局; 深入理解flex-grow、flex-shrink、flex-basis