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

$(".a1").click(function(){

$(".p1").fadeIn(500);
$(".p2").hide();
$(document).ready(function(){
$(".p2").hide();
$(".p3").hide();
$(".p4").hide();

$(".a1").click(function(){

$(".p1").fadeIn(500);
$(".p2").hide();
$(".p3").hide();
$(".p4").hide();
});

$(".a2").click(function(){

$(".p2").fadeIn(500);
$(".p1").hide();
$(".p3").hide();
$(".p4").hide();
});

$(".a3").click(function(){

$(".p3").fadeIn(500);
$(".p2").hide();
$(".p1").hide();
$(".p4").hide();
});

$(".a4").click(function(){

$(".p4").fadeIn(500);
$(".p2").hide();
$(".p3").hide();
$(".p1").hide();
});
可不可以把它写得更加简洁点求大神

举报该文章

其他看法

第1个回答推荐于2017-10-15

<!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，你可以参考修改应该可以满足你的要求本回答被提问者采纳

相似回答

大家正在搜