js添加移除class、显示与隐藏

css：

.hide{display: none;}
.item{display: inline-block;cursor: pointer;padding: 0 20px;}
.inl{display: inline-block;}
.rotate-1{-webkit-animation: rotate-1 1s linear both;}
.rotate-2{-webkit-animation: rotate-2 1s linear both;}
@-webkit-keyframes rotate-1{
0%{transform: rotate(0);}
100%{transform: rotate(-90deg);}
}
@-webkit-keyframes rotate-2{
0%{transform: rotate(-90deg);}
100%{transform: rotate(0);}
}

html:

<div class="item item-1">onclick</div>
<div class="inl">&laquo;</div>
<div class="item item-2">onclick</div>
<div class="inl">&laquo;</div>
<div class="con con-1 hide">显示隐藏con-1</div>
<div class="con con-2 hide">显示隐藏con-2</div>

js:

var items = document.getElementsByClassName('item');
var con = document.getElementsByClassName('con');
var inl = document.getElementsByClassName('inl');
for(var i=0;i<items.length;i++){
　　items[i].index = i;
　　items[i].onclick = function(){
　　　　if(con[this.index].style.display == 'block'){//判断如果元素状态为显示时执行
　　　　　　con[this.index].style.display = 'none';
　　　　　　inl[this.index].classList.remove('rotate-1');//移除class
　　　　　　inl[this.index].classList.add('rotate-2');//添加class
　　　　}else{
　　　　　　con[this.index].style.display = 'block';
　　　　　　inl[this.index].classList.add('rotate-1');
　　　　　　inl[this.index].classList.remove('rotate-2');
　　　　}
　　}
}

转载于:https://www.cnblogs.com/joker-xd/p/8276037.html