正文
jquery图片按钮,点击按钮使用jquery隐藏图片
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何在点击一个按钮时使用jquery隐藏一个图片
页面放一张图：
img id="myImg" src="./myPic.png"
按钮，按钮的点击事件调用myFun函数：
button value="按钮" onclick="myFun();"
js中加入这个函数，利用jQuery的hide方法进行隐藏：
function myFun(){
$("#myImg").hide(); //获取id为myImg的元素并隐藏
}
相关问答
Q1: 用jquery怎么在一张图片上放一个按钮
你可以设置按钮的背景图片；
可以放一个透明的按钮；
也可以给这个图片添加click()涵数，当作按钮。
Q2: 怎么用jquery的方法点击4个按钮更换4张不同图片
方法一：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
script src="jquery-1.10.1.min.js"/script
script
$(function () {
$('button').click(function () {
$(this).siblings('span').css('display','none');
$(this).next().css('display','inline-block');
})
})
/script
style
span {
display: none;
}
/style
/head
body
div
button type="button"按钮一/button
span图片一/span
button type="button"按钮二/button
span图片二/span
button type="button"按钮三/button
span图片三/span
button type="button"按钮四/button
span图片四/span
/div
/body
/html
方法二：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
script src="jquery-1.10.1.min.js"/script
script
$(function () {
$('button').each(function (index) {
$(this).attr('index',index);
$('span').eq(index).attr('index',index);
$(this).click(function () {
$('span').hide();
if ($(this).attr('index') === $('span').eq(index).attr('index')) {
$('span').eq(index).css('display','inline-block');
}
})
})
})
/script
style
span {
display: none;
}
/style
/head
body
div
button type="button"按钮一/button
button type="button"按钮二/button
button type="button"按钮三/button
button type="button"按钮四/button
/div
div
span图片一/span
span图片二/span
span图片三/span
span图片四/span
/div
/body
/html
方法有很多，主要看你如何布局吧
Q3: 如何jQuery实现图片轮播的同时左右按钮可以实现切换？
建议，在当前轮播图的div添加类active，设置.active {display：block；}，.ban{display:none;};这样可以通过添加或移除active就可以了；这样以下就比较方便很多，要不然又要做循环，麻烦（swiper插件做轮播效果不错）
$(".left").click(function(){
var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标
if($index === 0 ) {//当前为第一张轮播图
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
}else {
$(".ban").eq($index-1).addClass("active)
.siblings(".ban").removeClass("active");
})
$(".right").click(function(){
var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标
if($index === ($(".ban").length-1) ) {//当前为最后一张轮播图
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
}else {
$(".ban").eq($index+1).addClass("active)
.siblings(".ban").removeClass("active");
})
//大体思路是这样了，代码可能有个别字母写得不对，毕竟是手敲的，但是大概思路是这样了
