javascript - onClick图片，显示div内容

Question

我是 javascript 的新手，但我想知道如何在其中做一些事情。基本上我有 3 个图像按钮。我想知道如何做到这一点，当您单击第一个按钮时，会出现一个 div，然后当您单击下一个按钮时，存在的 div 会消失，而下一个 div 会在其位置显示按钮二。我所说的 div 是指我放入其中的任何内容。就像网站上的选项卡一样，当您单击一个选项卡时，您会看到一个页面。然后，当您单击下一个选项卡时，上一页消失并显示下一页。而不是页面，这些将是 div。

如有任何建议，我们将不胜感激。

Answer 1

这是隐藏和显示相关 div 的简单解决方案

检查解决方案的链接:http://jsfiddle.net/silpa/rny2wb5z/34/

HTML:

 <img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId1"/> 
 <img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId2"/> 
 <img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId3"/>
 <div id="divId1" class="hideDivs">Div 1</div>
 <div id="divId2" class="hideDivs">Div 2</div>
 <div id="divId3" class="hideDivs">Div 3</div>

jQuery:

 $("img").on('click',function(){
   var hello = $(this).attr('data-id');
   $('.hideDivs').hide();
   $('#'+hello).show();
 });

CSS:

 .hideDivs{
    display:none; 
 }