13518219792
创新互联公司从2013年开始，是专业互联网技术服务公司，拥有项目网站制作、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元红河做网站,已为上家服务,为红河各地企业和个人服务,联系电话:18982081108
先给导航块的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);
})
}
!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();
}
}
);
});
});
!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。
