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

})

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

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

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

可以放一个透明的按钮；

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

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

页面放一张图：

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

按钮，按钮的点击事件调用myFun函数：

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

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

function myFun(){

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

}

Q4: 如何给图片加click事件 jquery代码

首先要给图片添加一个Id，之后在jquery中写如下代码：

$("#图片ID").click(function(){

alert("aa”);

});

或者

$("#图片ID").bind("click",function(){

alert("aa");

});

扩展资料：

Click 事件实际应用：

此事件是在一个对象上按下然后释放一个鼠标按钮时发生。它也会发生在一个控件的值改变时。

对一个 Form 对象来说，该事件是在单击一个空白区或一个无效控件时发生。对一个控件来说，这类事件的发生是当： 用鼠标的左键或右键单击一个控件。对 CheckBox, CommandButton, Listbox 或 OptionButton 控件来说，Click 事件仅当单击鼠标左键时发生。

通过按下箭头键或者单击鼠标按钮，对 ComboBox 或 ListBox 控件中的项目进行选择。

当 CommandButton,OptionButton 或 CheckBox 控件具有焦点时，按下 SPACEBAR 键。

当窗体带有其 Default 属性设置为 True 的 CommandButton 控件时，按下 ENTER 键。

当窗体带有一个 Cancel 按钮 — 其 Cancel 属性设置为 True 的 CommandButton 控件时，按下 ESC 键。

对控件按下一个访问键。例如，如果一个 CommandButton 控件的标题是 "Go"，则按下 ALT+G 键可触发该事件。 也可在代码中触发 Click 事件，通过： 将一个 CommandButton 控件的 Value 属性设置为 True。

将一个 OptionButton 控件的 Value 属性设置为 True。

改变一个 CheckBox 控件的 Value 属性的设置。

参考资料来源：百度百科：Click事件