收藏按鈕 粉色、白色、切換

.Collect_Btn {
    float: left;
    color: white;
    font-size: 14px;
    margin-right: 20px;
}
.Collect_BtnCur {
    float: left;
    color: #F6524E;
    font-size: 14px;
    margin-right: 20px;
}

<a  href="#" class="Collect_Btn"></a>

<script>
    // <!-- 收藏按鈕 粉色、白色、切換-->
    $('.Collect_Btn').on('click', function () {
        if($(this).hasClass('Collect_BtnCur')) {
            $(this).attr("class","Collect_Btn")
        } else {
            $(this).attr("class","Collect_BtnCur")
        }
    })
</script>

案例二： 是否隱藏

image.png

<div class="td_ShowHide">
    <div class="td_ShowHide_Circle"></div>
</div>

.td_ShowHide {
  position: relative;
  background-color: rgba(0, 0, 0, 0.3);
  height: 20px;
  width: 80px;
  text-align: center;
  line-height: 20px;
  border-radius: 10px;
  cursor: pointer;
  transition:All 0.4s ease-in-out;
}
.td_ShowHide::after {
  display: block;
  content: '隱藏中'
}
.td_ShowHide.cur {
  background-color: rgba(182, 109, 255, 1);
  color: #fff;
}
.td_ShowHide.cur::after {
  display: block;
  content: '顯示中'
}
.td_ShowHide .td_ShowHide_Circle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #999;
  top: 1px;
  left: 1px;
  background: #fff;
  transition:All 0.4s ease-in-out;

}
.td_ShowHide.cur .td_ShowHide_Circle {
  left: 61px;
  transition:All 0.4s ease-in-out;
}

    // <!-- 隱藏顯示按鈕 切換 -->
    $('.td_ShowHide').on('click', function () {
      if ($(this).hasClass('cur')) {
        $(this).attr("class", "td_ShowHide")
      } else {
        $(this).attr("class", "td_ShowHide cur")
      }
    })