jQuery實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能
點(diǎn)贊，網(wǎng)絡(luò)用語，表示“贊同”、“喜愛”。
該網(wǎng)絡(luò)語來源于網(wǎng)絡(luò)社區(qū)的“贊”功能。送出和收獲的贊的多少、贊的給予偏好等，在某種程度能反映出你是怎樣的人以及處于何種狀態(tài)。點(diǎn)贊的背后，反映出你自己。與之對應(yīng)的便是取消功能。恰巧最近博主在一款A(yù)PP，其中一個版塊需要實(shí)現(xiàn)點(diǎn)贊和取消功能，經(jīng)過思考決定用JQuery代碼實(shí)現(xiàn)它，好了廢話不多說，上干貨！！
首先要引入JQuery插件
其次，我們需要定義一個div，并給它一些樣式
然后就是JS代碼了，如下所示
$(document).ready(function(){
var onOff=true;
var div=$(".div");
div.click(function(){
if (div.onOff) {
div.val("關(guān)注我");
div.css({"background":'#ccc'});
div.onOff = false;
} else {
div.css({"background":'red'});
div.val("已關(guān)注");
div.onOff = true;
}
});
});
實(shí)現(xiàn)效果如下
可見JS代碼是好用的，同樣的，也可以實(shí)現(xiàn)圖片切換效果如下圖
其實(shí)現(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實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表單驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
JQuery實(shí)現(xiàn)DIV其他動畫效果的簡單實(shí)例
下面小編就為大家?guī)硪黄狫Query實(shí)現(xiàn)DIV其他動畫效果的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
jQuery 標(biāo)題的自動翻轉(zhuǎn)實(shí)現(xiàn)代碼
我們平時在開發(fā)web程序的時候，想把一個新聞源滾動顯示新聞的條目的標(biāo)題及內(nèi)容摘要，而且是每次一條，有點(diǎn)類似csdn的滾動廣告。2009-10-10
asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼
asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼 ，比頁面刷新更好，用戶體驗(yàn)更好，需要的朋友可以參考下。2010-09-09
這篇文章主要介紹了json格式的javascript對象用法,結(jié)合實(shí)例形式總結(jié)分析了javascript針對json格式數(shù)據(jù)操作的常見技巧,需要的朋友可以參考下2016-07-07
如何想讓頁面上兩個div中的滾動條(滑塊)同步運(yùn)動該怎實(shí)現(xiàn)，具體代碼如下，感興趣的朋友可以參考下2013-08-08
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)圖片對比，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
jquery中實(shí)現(xiàn)簡單的tabs插件功能的代碼
jquery改變了程序員寫javascript的方式。作為jquery的愛好者和新手，最近我學(xué)會了用寥寥幾句jquery代碼實(shí)現(xiàn)類似tabs插件的功能，相信此文能為許多剛?cè)腴T的jquery愛好者和想實(shí)現(xiàn)tabs插件功能的朋友帶來一些幫助。2011-03-03
本文給大家分享一段jquery代碼實(shí)現(xiàn)手指滑動輪播效果，代碼簡單易懂，非常不錯，需要的朋友參考下2016-12-12
jquery ztree實(shí)現(xiàn)模糊搜索功能
這篇文章主要為大家詳細(xì)介紹了jquery ztree實(shí)現(xiàn)模糊搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02