由于在做如下页面的布局时,采用了多个li标签来展现,需要达到的效果是:
1、每点击一个选项卡,该选项卡的背景颜色改变,再点击一次就变回本来的颜色
2、支持多选,并且把选中的选项卡数据存入数组
主要用到的方法就是,取到所有的li标签进行循环添加点击事件,给当前点击的li标签添加一个className,给该className设置背景样式,但是由于本来的li标签有多个className,需要取到添加的className,对其进行判断,代码如下:
var Oli= document.querySelectorAll('#topPopover li'); //取到所有的li标签
var liList=[]; //定义一个数组
for( var i=0 ;i<Oli.length;i++){
Oli[i].onclick=function(){
this.classList.toggle('tog'); //添加一个classNmae,并在css中设置样式
console.log(this.className); //打印出当前点击li标签的所有className
var str=this.className.split(" ")[2]; // 取出添加的className
if(str=='tog'){
liList.push(this.innerText);
}else{
liList.pop(this.innerText);
}
}
}