案例样式即功能

HTML代码：

  
  
  
  


  

    

      //搜索框
      
//性别筛选按钮
        male
        female
        all
      
    
    
//搜索列表，有js渲染添加
      

      
    
  
  

CSS代码：

*{
  margin:0;
  padding:0;
  list-style: none;
}
.wrapper{
  width:400px;
  border:1px solid #ccc;
  margin: 100px auto;
  border-radius:4px;
}
.wrapper .search{
  width:100%;
  height:50px;
  line-height:50px;
}
.wrapper .search input{
  padding:10px 15px;
  border-radius:4px;
  margin-left:30px;
  border:1px solid #ccc;
  outline:none;

}
.wrapper .search p{
  display:inline-block;
}
.wrapper .search p span{
  color:#38f;
  padding:3px 5px;
}
.wrapper .search p span.active{
  color:#fff;
  background-color:#38f;
  border-radius: 4px;
}
.wrapper .user-list{
  width:100%;
}
.wrapper .user-list ul{
  width:100%;
}
.wrapper .user-list ul li{
  border-bottom:1px solid #ccc;
  position:relative;
  padding:10px 0;
  margin:0 30px;
}
.wrapper .user-list ul li img{
  height:40px;
  width:40px;
  position:absolute;
}
.wrapper .user-list ul li p{
  margin-left:50px;
  width:300px;
  color:rgb(117, 114, 114);
}

Javascript代码：

var oul=document.getElementsByTagName("ul")[0];
var oinput=document.getElementsByTagName("input")[0];
var text='',sex='a';//要将text和sex写在全局变量里面，这样可以记录上次操作的值为后续的页面渲染作准备；
var personArr=[
  {name:'王刚',src:'images/1.png',des:'颈椎不好',sex:'m'},
  {name:'刘颖',src:'images/2.png',des:'我是谁',sex:'f'},
  {name:'王秀英',src:'images/3.jpg',des:'我很好看',sex:'f'},
  {name:'刘金磊',src:'images/4.png',des:'你没有见过陌生人的脸',sex:'m'},
  {name:'刘飞仙',src:'images/5.jpg',des:'瓜皮刘',sex:'m'}
];
//页面渲染
function randerlist(arr){
  var str='';
  arr.forEach(function(elem,index){
    str+='
\
    \
    
'+elem.name+'
\
    
'+elem.des+'
\
  
'
  });
  oul.innerHTML=str;
}
randerlist(personArr);
//为性别筛选按钮设置点击事件，并获取每一次点击后的结果进行页面渲染。
var spans=document.getElementsByTagName("p")[0].children;
for(var i=0;i