1. 技术文章
  2. 仿爱购网（商品分类）html+css+JS

仿爱购网（商品分类）html+css+JS

由 梦想与她 提交于 2019-11-27 05:33:01

实现单个选中、单个取消、多个选中、集中重置效果

 

html：

 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>
  </title>
  <link rel="stylesheet" type="text/css" href="css/classify.css"/>
  <link rel="stylesheet" type="text/css" href="css/reset.css"/>
  <link rel="icon"  href="img/title-icon.jpg"/>
 </head>
 <body>
  <div class="wrapper">
   <!--第一行开始-->
   <div class="row_one">
    <div class="rightword">
     <ul>
      <li class="li1 li3"><a class="a1" href="denglu.html">登录</a></li>
      <li class="li2 li3 "><a class="a2" href="zhuce.html">注册</a></li>
      <li class="li2 li3"><a class="a3" href="shopping.html">我的订单</a></li>
      <li class="li2 li3"><a class="a3" href="gouwuc.html">购物车</a></li>
     </ul>
    </div>
   </div>
   <!--第二行开始-->
   <div class="row_two">
    <a href="shouye.html"><img class="logo" src="img/logo.png"/></a>
    <div class="daohang">
     <input type="text" placeholder="牛奶" class="sousuo" name="" id="" value="" />
     <a class="a4" href="">搜索</a>
     <p>
      <a class="a2" href="">牛奶</a>
      <a class="a2" href="">牛仔裤</a>
      <a class="a2" href="">巧克力</a>
      <a class="a2" href="">月饼</a>
      <a class="a2" href="">抽纸</a>
      <a class="a2" href="">狗粮</a>
      <a class="a2" href="">奶粉</a>
      <a class="a2" href="">护发素</a>
      <a class="a2" href="">进口食品</a>
      <a class="a2" href="">良品铺子</a>
     </p>
    </div>
   </div>
   <!--第三行开始-->
   <div class="row_three">
    <div class="suoyou"><a href="">所有商品分类</a>
     <ul class="ul" id="xifen">
       <li>
        <a id="h0" href="#">全球进口</a>
       </li>
       <li>
        <a id="h1" href="#">国产食品</a>
       </li>
       <li>
        <a id="h2" href="#">服装服饰</a>
       </li>  
       <li>
        <a id="h3" href="#">护肤美妆</a>
       </li>
       <li>
        <a id="h4" href="#">家居用品</a>
       </li>    
       <li>
        <a id="h5" href="#">儿童玩具</a>
       </li>
       <li>
        <a id="h6" href="#">电子产品</a>
       </li>
       <li>
        <a id="h7" href="#">医药保健</a>
       </li>
       <li>
        <a id="h8" href="#">图书学习</a>
       </li>
     </ul>
     </div>
   </div>
   <!--第四行开始-->
   <div class="row_four">
    <div class="left1"></div>
    <div class="left2"></div>
    <div class="right1"></div>
    <div class="right2"></div>
    <span id="fennei" class="a1">全球进口</span>
    <span>></span>
   </div>
   <!--第五行开始-->
   <div class="row_five">
    <div class="row_five_left"><p>品牌</p></div>
    <ul class="row_five_right1" id="active01">
     
    </ul>
    <form action="">
    <input type="submit"  id="button1" value="确定" />
    <input type="reset"  id="button2" value="重置" />
    </form>
   </div>
   <!--第六行开始-->
   <div class="row_six">
    <ul>
     <li><a class="a2" href="">综合</a></li>
     <li><a class="a2" href="">销量</a></li>
     <li><a class="a2" href="">新品</a></li>
     <li><a class="a2" href="">价格</a> <input id="start" type="text" placeholder="¥" name="" id="" value="" /> - <input id="over" type="text" placeholder="¥" name="" id="" value="" />
     
     </li>
     
     <input type="submit"  id="button3" value="确定" />
     <input type="reset"  id="button4" value="清空" />
     
    </ul>    
   </div>
   <!--第七行开始-->
   <div class="row_seven">
    <ul id="active02">
     
    </ul>
   </div>
   <!--第八行开始-->
   <div class="row_eight">
   <div class="row_eight_1">
    <ul>
     <li class="li5"><a class="a2" href="">知识产权</a></li>
     <li class="li5"><a class="a2" href="">网站地图</a></li>
     <li class="li5"><a class="a2" href="">联系我们</a></li>
     <li class="li5"><a class="a2" href="">诚征英才</a></li>
     <li class="li5"><a class="a2" href="">开发平台</a></li>
     <li class="li5"><a class="a2" href="">联系客服</a></li>
     <li class="li5"><a class="a2" href="">廉正举报</a></li>
     <li class="li5"><a class="a2" href="">营销中心</a></li>
     <li class="li5"><a class="a2" href="">合作伙伴</a></li>
     <li class="li5"><a class="a2" href="">关于爱购</a></li>
    </ul>
   </div>
   <div class="row_eight_2">
    <ul>
     <li class="li4 a2">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy2018-2020 igo.com 版权所有</li>
    </ul>
   </div>
   </div>
  </div>
  </body>

css:

 

.wrapper{
 width: 1440px;
 margin: 0 auto; 
 background-color: #fafafa;
}
/*第一行开始*/
.row_one{
 height: 32px;
 background-color: #f4f4f4;
 border-bottom: 1px solid #e7e7e7;
}
.rightword{
 margin-left: 1048px;
 height: 32px;
 line-height: 32px;
}
.li1{
 color: #b41e23;
 float: left;
}
.li2{
 float: left;
 margin-left: 28px;
}
.a1{
 color: #b41e23;
}
.a2{
 color: #999999; 
}
.a3{
 color: #000000; 
}
.li3{
 font-size: 12px;
}
/*第一行结束*/
/*第二行开始*/
.row_two{
 height: 101px;
}
.logo{
 margin-left: 106px;
 margin-top: 20px;
 float: left;
}
.daohang{
 width: 750px;
 height: 81px;
 float: left;
 margin-left: 79px;
 margin-top: 21px;
}
.sousuo{
 width: 691px;
 height: 37px;
 border: 2px solid #b41e23;
 padding-left:10px;
}
.a4{
 float: right;
 display: block;
 height: 41px;
 width: 45px;
 background-color: #b41e23;
 text-align: center;
 line-height: 41px;
 color: #FFF;
 font-weight: bold;
}
p a{
 font-size: 14px;
 margin-right: 15px;
}
.row_two a:hover{
 color: #000000;
}
/*第二行结束*/
/*第三行开始*/
.row_three{
 height: 40px;
 border-bottom: 2px solid #b41e23;
}
.suoyou{
 width: 202px;
 height: 400px;
 margin-left: 104px;
}
.row_three a{
 text-align: center;
 line-height: 40px;
 color: #fff;
 font-weight: bold;
 display: block;
 width: 202px;
 height: 40px;
 /*margin-left: 104px;*/
 background-color: #b41e23;
}
.ul>li a{
 margin: 0;
 display: inline-block;
}
.row_three ul{
 /*margin-left: 104px;*/
 display: none;
 width: 202px; 
}
.suoyou:hover .ul{
 display: block;
}
.ul>li a:hover{
 background-color: #eddabc;
}
/*第三行结束*/
/*第四行开始*/
.row_four{
 height: 44px;
}
.left1,.left2,.right1,.right2{
 width: 7px;
 height: 7px;
 background-color: #b41e23;
 float: left;
}
.left1{
 margin-left: 126px;
 margin-top: 14px;
}
.left2{
 margin-left:-7px;
 margin-top: 23px;
}
.right1{
 margin-top: 14px;
 margin-left: 2px;
}
.right2{
 margin-top: 23px;
 margin-left: -7px;
}
.row_four span{
 float: left;
 display: block;
 margin-top: 10px;
 padding-left: 10px;
}
/*第四行结束*/
/*第五行开始*/
.row_five{
 height: 295px;
 border: 1px solid #e7e7e7;
}
.row_five_left{
 float: left;
 padding-top: 20px;
 width: 155px;
 height: 275px;
 background-color: #f8f8f8;
 border-right: 1px solid #e7e7e7;
 text-align: center;
}
.row_five_left p{
 color: #666666;
}
.row_five_right1{
 width: 1009px;
 height: 215px;
 margin-left: 41px;
 margin-top: 22px;
 float: left;
 /*border: 0.5px solid #e7e7e7;*/
}
.row_five_right1 li{
 border: 1px solid #e7e7e7;
 /*padding-left: 30px;*/
 padding-top: 17px;
 width: 110px;
 height: 86px;
 float: left;
}
.p1{
 font-size: 12px;
 text-align: center;
}
.img{
 margin-left: 30px;
 width: 51px;
 height: 52px;
}
.img1{
 display: none;
 width: 20px;
 height: 20px;
 position: relative;
 right: -90px;
 bottom:7px;
}
#button1{
 width: 60px;
 height: 37px;
 margin-left: 480px;
 margin-top: 12px;
 border: none;
 background-color: #b41e23;
 color: #fff;
}
#button2{
 width: 60px;
 height: 37px;
 margin-left: 25px;
 margin-top: 12px;
 border: none;
 background-color: #eeeeee;
}
.row_five_right1 img:hover{
 transform: translate(-3px,0);
}
/*第五行结束*/
/*第六行开始*/
.row_six{
 height: 40px;
 margin-top: 13px;
 border: 1px solid #e7e7e7;
 background-color: #f8f8f8; 
 line-height: 40px;
 font-size: 12px;
}
.row_six li{
 float: left;
 margin-left: 20px;
 margin-right: 30px;
}
.row_six input{
 width: 40px;
}
#button3{
 width: 60px;
 height: 40px; 
 border: none;
 background-color: #b41e23;
 color: #fff;
}
#button4{
 width: 60px;
 height: 40px;
 margin-left: 10px;
 border: none;
 background-color: #eeeeee;
}
/*第六行结束*/
/*第七行开始*/
.row_seven{
 width: 1253px;
 margin-left: 103px;
 height: 617px;
}
.row_seven li{
 background-color: #fff;
 width: 233px;
 height: 292px;
 float: left;
 margin-top: 12px; 
 font-size: 12px;
 overflow: hidden;
}
.row_seven li img:hover{
 transform: scale(1.2);
 transition: all 1s;
 /*box-shadow: 3px 3px 5px 3px #999999;*/
}
.row_seven li p{
 display: block;
 width: 209px;
 margin-left:12px;
 margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.liimg{
 margin-right: 17px;
}
.g-price {
    font-size: 16px;
    color: #f00;
    margin-left: 15px;
    font-weight: bolder;
}
.g-num {
    margin-left: 80px;
    color: #999;
}

.row_five,.row_six{
 width: 1233px;
 margin-left: 103px;
 margin-right: 104px;
}
/*第七行结束*/
/*第八行开始*/
.row_eight{
 height:58px ;
 font-size: 12px;
}
.row_eight_1{
 height: 58px;
 width: 920px;
 float: left;
}
.row_eight_2{
 height: 58px;
 width: 520px;
 float: left;
}
.li5{
 height: 58px;
 width: 64px;
 float: right;
 line-height: 58px;
}
.li4{
 height: 58px;
 line-height: 58px;
}

 JS:

 

  <script type="text/javascript">
//传数据                 
   var active01 = document.getElementById('active01');      
   var arr1 = [
    {img:"img/liangpin.jpg",neirong:"盐津铺子",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"良品铺子",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"百草味",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"大红袍",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"金龙鱼",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"芬尼湾",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"农夫山泉",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"鲁花",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"伊利",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"芦苇微微",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"天地精华",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"广州酒家",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"吾润",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"雲杉",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"福芝林",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"十景斋",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"美心",img2:"img/choose.PNG"},
    {img:"img/liangpin.jpg",neirong:"购食惠",img2:"img/choose.PNG"},
    
   ]
   for(var i=0;i<arr1.length;i++){
    active01.innerHTML += `
     <a><li id="img0">     
     <img class="img" src="${arr1[i].img}">
     <p class="a2 p1">${arr1[i].neirong}</p> 
     <img class="img1" src="${arr1[i].img2}">      
     </li></a>
    `
   }
   
   var active02=document.getElementById('active02');
   var arr2=[
   {img3:"img/classify/classify-global01.jpg",neirong1:"马来西亚进口 茱蒂丝（Julie's）美旋律什锦饼干",neirong2:"¥39.00",neirong3:"销量：800"},
   {img3:"img/classify/classify-global02.jpg",neirong1:"新西兰原装进口牛奶 安佳Anchor全脂牛奶",neirong2:"¥89.00",neirong3:"销量：800"},
   {img3:"img/classify/classify-global03.jpg",neirong1:"葡韵手信 澳门特产 休闲零食 传统糕点小吃 千层酥150g",neirong2:"¥23.00",neirong3:"销量：800"},
   {img3:"img/classify/classify-global04.jpg",neirong1:"日本进口 白色恋人 北海道 白巧克力夹心饼干12枚 休闲零食 礼盒132g",neirong2:"¥89.00",neirong3:"销量：800"},
   {img3:"img/classify/classify-global05.jpg",neirong1:"澳大利亚 进口奶粉 德运 （Devondale）调制乳粉（全脂）成人奶粉 1kg 袋装",neirong2:"¥69.00",neirong3:"销量：800"},
   {img3:"img/classify/classify-global06.jpg",neirong1:"澳大利亚 进口牛奶 德运（Devondale） 全脂牛奶 1L*10 整箱装",neirong2:"¥99.00",neirong3:"销量：800"},
   {img3:"img/classify/classify-global07.jpg",neirong1:"Ferrero Rocher费列罗榛果威化糖果巧克力礼盒48粒600g",neirong2:"¥129.00",neirong3:"销量：800"},
   {img3:"img/classify/classify-global08.jpg",neirong1:"新西兰原装进口牛奶 安佳Anchor全脂牛奶UHT纯牛奶1L*12 整箱装",neirong2:"¥139.00",neirong3:""},
   {img3:"img/classify/classify-global09.jpg",neirong1:"沙特阿拉伯进口 麦维他（Mcvitie's）全麦酥性消化饼干纤滋棒原味180g",neirong2:"¥17.90",neirong3:"销量：800"},
   {img3:"img/classify/classify-global10.jpg",neirong1:"泰国进口 家乐氏（Kellogg’s）谷维滋 即食谷物 进口冲调 营养谷物早餐310g",neirong2:"¥29.90",neirong3:"销量：800"},
   
   ]
   for(var i=0;i<arr2.length;i++){
    active02.innerHTML +=`
    <li class="liimg"><a href="">
    <img src="${arr2[i].img3}">
    <p class="a2">${arr2[i].neirong1}</p>
    <span class="g-price">${arr2[i].neirong2}</span>
    <span class="g-num">${arr2[i].neirong3}</span>
    </a></li>
    `   
   }
   
   
   
//分类
   var fennei=document.getElementById("fennei");
   var xifen=document.getElementById("xifen");
   var lifen=xifen.getElementsByTagName("li");
   for(var i=0;i<lifen.length;i++){
    lifen[i].index=i;
    var index=i;
    lifen[i].onclick=function(){
     fennei.innerHTML=lifen[this.index].innerText;
    }
   }
   
//选中，取消
  var uls=document.getElementById("active01");
  var lis=uls.getElementsByTagName("li");
  var flag=0;
  var flags=[];
  var button2=document.getElementById('button2')
  for(var num=0;num<lis.length;num++){
   lis[num].index=num;
   var index=num;
   lis[num].onclick=function () {
    flags[this.index] = !flags[this.index];
    if(flags[this.index]==1){
     lis[this.index].children[2].style.display="block";
     this.style.borderColor = 'red';
    }
    else{
     lis[this.index].children[2].style.display="none";
     this.style.borderColor = "#e7e7e7";
    } 
   }
//重置
   
   button2.onclick=function(){
   for(var num=0;num<lis.length;num++){ 
   lis[num].children[2].style.display="none";
   lis[num].style.borderColor = "#e7e7e7";
  }
  } 
  }
 
   
//清空
  
  var button4=document.getElementById('button4')
  var start=document.getElementById('start')
  var over=document.getElementById('over')
  button4.onclick=function(){
   start.value='';
   over.value=''
  }
  
  </script> 
</html>
标签
商品分类
background
border
num
margin
日剧
悬疑电视剧
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!