资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jquery图片按钮,点击按钮使用jquery隐藏图片

如何在点击一个按钮时使用jquery隐藏一个图片

页面放一张图:

创新互联建站是一家集网站建设,凭祥企业网站建设,凭祥品牌网站建设,网站定制,凭祥网站建设报价,网络营销,网络优化,凭祥网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

img id="myImg" src="./myPic.png"

按钮,按钮的点击事件调用myFun函数:

button value="按钮" onclick="myFun();"

js中加入这个函数,利用jQuery的hide方法进行隐藏:

function myFun(){

$("#myImg").hide(); //获取id为myImg的元素并隐藏

}

用jquery怎么在一张图片上放一个按钮

你可以设置按钮的背景图片;

可以放一个透明的按钮;

也可以给这个图片添加click()涵数,当作按钮。

怎么用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

方法有很多,主要看你如何布局吧

如何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");

})

//大体思路是这样了,代码可能有个别字母写得不对,毕竟是手敲的,但是大概思路是这样了


文章题目:jquery图片按钮,点击按钮使用jquery隐藏图片
文章转载:http://cdkjz.cn/article/dsdspdi.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220