jQuery按钮显示/隐藏图像和文本

Question

我建立了一个网站，在这个网站上，当我单击bt1时，我有jQuery的两个按钮，该图像出现后，然后单击btn2，第一个图像应消失，该按钮btn2的第二个图像出现。

问题是我单击btn1，然后单击btn2，当我想回到btn1并单击它时，它不起作用。 我必须彼此双击，单击以打开图像，而另一个则关闭。

我想单击一次以查看图像，当我单击第二个按钮时，第一个图像消失并打开第二个图像。

而且我希望该图像**在我打开网站时出现，但是当我单击任何按钮（btn1，btn2）时，图像隐藏消失了。

**第三张图片不是（btn1 / btn2）的图片，但是当我打开我的网站时出现n当我点击任何图片时消失了感谢您的帮助

<html>
<head>

<script type="text/javascript">

function showhide_menu(id){
   $("#" + id).toggle();
}

</script>
</head>
<body>
<button onclick="showhide_menu('btn1');">Show/Hide.  </button>

 <button onclick="showhide_menu('btn2');">Show/Hide.  </button>

<div id="btn1" style="display:none;">
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
    text text text text text text text text text....</div>

<div id="btn2" style="display:none;">
    <img src="http://www.inquisitr.com/wp-content/2012/02/breaking-dawn-saga.jpg"/>
    text text text text text text text text text....</div>

</body>
</html>

Answer 1

给btn -DIVs一个类。 然后在切换之前隐藏它们：

http://jsfiddle.net/qYCUJ/

HTML

<div id="btn1" class="btn" style="display:none;">
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
    text text text text text text text text text....
</div>
<div id="btn2" class="btn" style="display:none;">
    <img src="http://www.inquisitr.com/wp-content/2012/02/breaking-dawn-saga.jpg"/>
    text text text text text text text text text....
</div>

JS

function showhide_menu(id){
    $('.btn:not(#'+id+')').hide();
    $("#" + id).toggle();
}

Answer 2

你也可以用这个

function showhide_menu(){
    if($('#btn1').is(':visible'))
    { 
        $('#btn1').hide();
        $('#btn2').show();
    }
    else
    {
       $('#btn2').hide();
        $('#btn1').show();
    }
}