jQuery如何實(shí)現(xiàn)：點(diǎn)擊按鈕-文本之間的切換

已知的文本（綠色，紅色），那么你可以使用if判斷來做；

目前成都創(chuàng)新互聯(lián)公司已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、晉寧網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

$(".btn").on("click",function(){

var?text?=?$("#text").html();

if(text=="綠色"){

$("#text").html("紅色");

}else?if(text=="紅色"){

$("#text").html("綠色");

}

})

jquery點(diǎn)擊圖標(biāo)來回切換的幾種方法（如開關(guān)

先給導(dǎo)航塊的a標(biāo)簽設(shè)置img屬性和data-img屬性；img屬性為未選中圖片，data-img為選中圖片。第一個(gè)按鈕的img圖片應(yīng)設(shè)置為默認(rèn)選中的狀態(tài)。

//點(diǎn)擊每個(gè)按鈕后進(jìn)行按鈕切換圖片操作

$(".tab-bar-item").on("click",?function?()?{

//先const clickImg變量為他的data屬性（選中圖片） ，然后找到img圖片的src屬性將未選中的圖片點(diǎn)擊后替換為選中圖片

const?clickImg?=?$(this).data("img");

$(this).find("img").attr("src",clickImg);

//找到被點(diǎn)擊標(biāo)簽的其他兄弟標(biāo)簽，用each遍歷 const noclick為未選中的img圖片，將點(diǎn)擊標(biāo)簽的其他兄弟標(biāo)簽的img換為未選中圖片就可以了

$(this).siblings().each(function(){

const?noclickImg=?$(this).attr("img")

$(this).find("img").attr("src",noclickImg);

})

}

JQuery切換樣式

這個(gè)用jQuery實(shí)現(xiàn)一般是添加一個(gè)類和刪除一個(gè)類。

首先要有一個(gè)寫好的class樣式類。通過下面這個(gè)代碼實(shí)現(xiàn)：

var obj2 = $("div"); // 改變樣式的對(duì)象

obj2.addClass("className"); // 添加樣式，className為已經(jīng)存在一個(gè)class名字

obj2.removeClass("className"); // 刪除樣式

切換樣式

JQuery中有一個(gè)方法toggle()，JQuery代碼如下：

1 toggleBtn.toggle(function(){

2 //元素顯示 代碼③

3 }, function(){

4 //元素隱藏 代碼④

5 })

toggle()方法此處的作用是交替執(zhí)行代碼③和代碼④兩個(gè)函數(shù)，如果元素原來是顯示的，則隱藏它：如果元素原來是隱藏的，則顯示它。此時(shí)，toggle()方法主要是控制行為上的重復(fù)切換。

另外JQuery還提供了一個(gè)toggleClass()方法控制樣式上的重復(fù)切換。如果類名存在則刪除它，如果類名不存在則添加它。例如對(duì)p元素進(jìn)行toggleClass()方法操作。

1 $("p").toggleClass("another"); //重復(fù)切換類名“another”

當(dāng)不斷單擊“切換樣式”按鈕時(shí)，p元素的class的值就會(huì)在“myClass”和“myClass another”之間重復(fù)切換。

當(dāng)前名稱：jquery切換,jquery切換圖片代碼
URL地址：http://chinadenli.net/article20/dsdsdco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、企業(yè)建站、搜索引擎優(yōu)化、微信公眾號(hào)

廣告

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