点击增加类名点击删除类名

点赞收藏

<footer class="aui-bar aui-bar-tab " id="footer">
  <div class="aui-bar-tab-item" id="laud_btn" style=" 2.2rem;" tapmode onclick="fnlaud()">
    <i class="aui-iconfont aui-icon-laud"></i>
  </div>
  <div class="aui-bar-tab-item" id="like_btn" style=" 2.2rem;" tapmode onclick="fnlike()" >
    <i class="aui-iconfont aui-icon-like"></i>
  </div>
</footer>

// 点赞
function fnlaud(){
var item = document.getElementById("laud_btn");

//判断有没有laud-active

//先移除后增加

if(item.className.indexOf('laud-active') > -1){         
  item.classList.remove('laud-active');
}else{
  item.classList.add("laud-active");
}
}
// 收藏
function fnlike(){
var item = document.getElementById("like_btn");
if(item.className.indexOf('laud-active')> -1){
item.classList.remove('laud-active');
}else{
item.classList.add("laud-active");
}
}

 点赞不是切换,需要用两个方法

tab

<div class="aui-tab aui-tab-content" id="tab">
  <div class="aui-tab-item "><div class="tit-in aui-active" tapmode onclick="newsgroupeOn(0,this)">我的评论与回复</div></div>
  <div class="aui-tab-item "><div class="tit-in" tapmode onclick="newsgroupeOn(1,this)">收到的评论<span class="dot"></span></div></div>
  <div class="aui-tab-item "><div class="tit-in" tapmode onclick="newsgroupeOn(2,this)">收到的回复<span class="dot"></span></div></div>
</div>

function newsgroupeOn(index, obj){

//声明
  var btitInBtn = document.querySelector(".tit-in.aui-active");
  btitInBtn.classList.remove("aui-active");
  obj.classList.add("aui-active");

})
}

//tab不需要验证active存在,他本来就有一个是存在的,tab是切换,不需要两个方法名

原文地址:https://www.cnblogs.com/lsongyang/p/9699226.html