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

創(chuàng)新互聯(lián)公司從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元紅河做網(wǎng)站,已為上家服務(wù),為紅河各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

先給導(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);

})

}

Bootstrup的jQuery開關(guān)按鈕在php中如何實(shí)現(xiàn)

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

html

head

titlecheckbox/title

script src="js/jquery-1.3.2.js" type="text/javascript"/script

script src="js/1.js" type="text/javascript"/script

/head

body

table id="table1"

tr

tdinput type="checkbox" value="1"/1/td

td id="k_1"input type="text" name="student" id="s_1" readonly="true"http://td

/tr

tr

tdinput type="checkbox" value="2"/2/td

td id="k_2"input type="text" name="student" id="s_2" readonly="true"http://td

/tr

tr

tdinput type="checkbox" value="3"/3/td

td id="k_3"input type="text" name="student" id="s_3" readonly="true"http://td

/tr

tr

tdinput type="checkbox" value="4"/4/td

td id="k_4"input type="text" name="student" id="s_4" readonly="true"http://td

/tr

/table

/body

/html

-------------------------------------------------------------

$(document).ready(function() {

$("td[id^='k_']").hide();

var check = $(":checkbox"); //得到所有被選中的checkbox

var actor_config; //定義變量

check.each(function(i){

actor_config = $(this);

actor_config.click(

function(){

if($(this).attr("checked")==true){

$("#k_"+$(this).val()).show();

}else{

$("#k_"+$(this).val()).hide();

}

}

);

});

});

jQuery 如何實(shí)現(xiàn)一個(gè)滑動(dòng)按鈕的開關(guān)

!DOCTYPE html html lang="en" head meta charset="UTF-8" titlejquery做的滑動(dòng)按鈕開關(guān)/title link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"/ /head style .switch{ width: 100px; margin: 100px 0px 0 100px; } .btn_fath{ margin-top: 10px; position: relative; border-radius: 20px; } .btn1{ float: left; } .btn2{ float: right; } .btnSwitch{ height: 40px; width: 50px; border:none; color: #fff; line-height: 40px; font-size: 16px; text-align: center; z-index: 1; } .move{ z-index: 100; width: 40px; border-radius: 20px; height: 40px; position: absolute; cursor: pointer; border: 1px solid #828282; background-color: #f1eff0; box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999; } .on .move{ left: 60px; } .on.btn_fath{ background-color: #5281cd; } .off.btn_fath{ background-color: #828282; } /style body p class="switch" p class="btn_fath clearfix on" onclick="toogle(this)" p class="move" data-state="on"/p p class="btnSwitch btn1"ON/p p class="btnSwitch btn2 "OFF/p /p p class="btn_fath clearfix off" onclick="toogle(this)" p class="move" data-state="off"/p p class="btnSwitch btn1"ON/p p class="btnSwitch btn2 "OFF/p /p /p script type="text/javascript" src="jquery/jquery.min.js"/script script type="text/javascript" src="bootstrap/bootstrap.min.js"/script script type="text/javascript" function toogle(th){ var ele = $(th).children(".move"); if(ele.attr("data-state") == "on"){ ele.animate({left: "0"}, 300, function(){ ele.attr("data-state", "off"); alert("關(guān)！"); }); $(th).removeClass("on").addClass("off"); }else if(ele.attr("data-state") == "off"){ ele.animate({left: '60px'}, 300, function(){ $(this).attr("data-state", "on"); alert("開！"); }); $(th).removeClass("off").addClass("on"); } } /script /body /html

需要注意的是：

1、這邊滑動(dòng)使用的速度是300ms，好像是勻速，沒有線性的快慢那種；試著找下能不能像CSS3中ease那種線性運(yùn)動(dòng)的。

2、animate方法中的回調(diào)函數(shù)，即運(yùn)動(dòng)結(jié)束后調(diào)用的function。