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

$(".a1").click(function(){$(".p1").fadeIn(500);$(".p2").hide();$(document).ready(func... $(".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，你可以参考修改应该可以满足你的要求


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

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

其他类似问题

为你推荐：