gpt4 book ai didi

javascript - 单击特定图像时更改 div 的 css

转载 作者:太空宇宙 更新时间:2023-11-04 03:32:32 25 4
gpt4 key购买 nike

我有三张图片,根据点击的图片,我想更改特定 div 的 css。我只是不明白如何将图像的点击连接到 div。

下面是一个(坏的)例子,说明我认为它应该如何工作。如果不为每个图像/点击创建一个函数,我不明白这是如何完成的。

 $('.circle_hiw_cont img').click(
function() {
if(this == content_img_1.jpg) {
$("#content_1").css("display", "block");
$("#content_2").css("display", "none");
$("#content_3").css("display", "none");
} else {

}
}
);

HTML:

<img id="content_img_1" src="images/conent_img1.jpg"/>
<img id="content_img_2" src="images/conent_img2.jpg"/>
<img id="content_img_3" src="images/conent_img3.jpg"/>
<div id="content_1">This is div 1</div>
<div id="content_2">This is div 2</div>
<div id="content_3">This is div 3</div>

CSS:

#content_1{display:block;}
#content_2{display:none;}
#content_3{display:none;}

最佳答案

您可以向元素添加类并使用indexeq 方法:

var $img = $('.img').on('click', function() {
$('.div').hide().eq( $img.index(this) ).show();
});

请注意,由于此解决方案是基于索引的,因此元素的顺序很重要。

关于javascript - 单击特定图像时更改 div 的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26111855/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com