點贊，網絡用語，表示“贊同”、“喜愛”。

創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網站建設、網站重做改版、精河網站定制設計、自適應品牌網站建設、成都h5網站建設、商城系統(tǒng)網站開發(fā)、集團公司官網建設、成都外貿網站建設、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為精河等各大城市提供網站開發(fā)制作服務。

該網絡語來源于網絡社區(qū)的“贊”功能。送出和收獲的贊的多少、贊的給予偏好等，在某種程度能反映出你是怎樣的人以及處于何種狀態(tài)。點贊的背后，反映出你自己。與之對應的便是取消功能。恰巧最近博主在一款APP，其中一個版塊需要實現(xiàn)點贊和取消功能，經過思考決定用JQuery代碼實現(xiàn)它，好了廢話不多說，上干貨?。?/p>

首先要引入JQuery插件

其次，我們需要定義一個div，并給它一些樣式

 然后就是JS代碼了，如下所示

$(document).ready(function(){
  var onOff=true;
  var div=$(".div");
  div.click(function(){  
    if (div.onOff) {
     div.val("關注我");
     div.css({"background":'#ccc'});
     div.onOff = false;
    } else {
     div.css({"background":'red'});
      div.val("已關注");
     div.onOff = true;
    }
   });
  });

實現(xiàn)效果如下

可見JS代碼是好用的，同樣的，也可以實現(xiàn)圖片切換效果如下圖

其實現(xiàn)代碼如下

html:

<div class="div"></div>

css:注意圖片路徑

.div{
     background-image: url(img/guanzhu.png);
     width: 100px;height: 40px;background-size:80px;background-repeat: no-repeat;
    }

JS代碼

$(document).ready(function(){
    var onOff=true;
    var div=$(".div");
    div.click(function(){  
      if (div.onOff) {
       div.css({"background-image":'url(img/guanzhu.png)'});
       div.onOff = false;
      } else {
       div.css({"background-image":'url(img/yiguanzhu.png)'});
       div.onOff = true;
      }
     });
    });

以上所述是小編給大家介紹的jQuery實現(xiàn)點擊關注和取消功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網站的支持！

分享名稱：jQuery實現(xiàn)點擊關注和取消功能
文章路徑：http://aaarwkj.com/article40/gpjsho.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供、外貿網站建設、靜態(tài)網站、小程序開發(fā)、自適應網站、移動網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)