JQ怎么实现点击一个按钮一张图片显示其他几张隐藏

发布网友发布时间：2022-04-23 03:33

共1个回答

热心网友时间：2022-04-23 05:02

<!DOCTYPE html>
<html>
<head>
<title> showAndHide </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jQuery.js"></script>
<style type="text/css">
#div1,#div2,#div3,#div4{
width: 100px;
height: 100px;
margin: 10px;
}
#div1{
background-color: red;
}
#div2{
background-color: blue;
display: none;
}
#div3{
background-color: gray;
display: none;
}
#div4{
background-color: green;
display: none;
}
</style>
<script type="text/javascript">
$(function(){
$("#test input").click(function(){
//alert(this.value);
$("#" + this.value).css("display","block").siblings().css("display","none");
});
});
</script>
</head>

<body>
<div id="test">
<input type="button" value="div1">
<input type="button" value="div2">
<input type="button" value="div3">
<input type="button" value="div4">
</div>
<div>
<div id="div1"><font size=5>First Div</font></div>
<div id="div2"><font size=5>Second Div</font></div>
<div id="div3"><font size=5>Third Div</font></div>
<div id="div4"><font size=5>Fourth Div</font></div>
</div>
</body>
</html>
这个我用div来代替你的图片，点击某个按钮，显示对应的div，你可以参考修改应该可以满足你的要求