jquery开关按钮,jQuery按钮

jquery点击图标来回切换的几种方法（如开关

先给导航块的a标签设置img属性和data-img属性；img属性为未选中图片，data-img为选中图片。第一个按钮的img图片应设置为默认选中的状态。

//点击每个按钮后进行按钮切换图片操作

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

//先const clickImg变量为他的data属性（选中图片） ，然后找到img图片的src属性将未选中的图片点击后替换为选中图片

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

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

//找到被点击标签的其他兄弟标签，用each遍历 const noclick为未选中的img图片，将点击标签的其他兄弟标签的img换为未选中图片就可以了

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

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

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

})

}

相关问答

Q1: Bootstrup的jQuery开关按钮在php中如何实现

!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"//td

/tr

tr

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

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

/tr

tr

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

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

/tr

tr

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

td id="k_4"input type="text" name="student" id="s_4" readonly="true"//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();

}

}

);

});

});

Q2: jQuery 如何实现一个滑动按钮的开关

!DOCTYPE html html lang="en" head meta charset="UTF-8" titlejquery做的滑动按钮开关/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("关！"); }); $(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、这边滑动使用的速度是300ms，好像是匀速，没有线性的快慢那种；试着找下能不能像CSS3中ease那种线性运动的。

2、animate方法中的回调函数，即运动结束后调用的function。