onClick图片，显示div内容

Question

我对javascript很陌生，但我想知道如何在其中做某事。 基本上我有3个图像按钮。 我想知道如何做到这一点，因此，当您单击第一个按钮时，将显示一个div，然后当您单击下一个按钮时，当前的div将消失，而下一个div在其位置显示为第二个按钮。 divs是指我放入其中的任何内容。 就像网站上的标签一样，单击一个页面即可获得一个页面。 然后，当您单击下一个选项卡时，上一页会消失并显示下一页。 代替页面的是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; 
 }

Answer 2

为div分配ID，然后使用功能设置其可见性。 您可以使用图片按钮的onClick属性调用此函数。

Javascript：

function changePage(newPageId) {
    //hide all pages
    document.getElementsByClassName("selectablePages").style.display = 'none';
    //show page we want to see
    document.getElementById(newPageId).style.display = 'block';
}

HTML：

<img src="p1.gif" alt="page1" onclick="changePage('page1')" />
<img src="p2.gif" alt="page2" onclick="changePage('page2')" />
<img src="p3.gif" alt="page3" onclick="changePage('page3')" />

<div id="page1" class="selectablePage">asdasdasd</div>
<div id="page2" class="selectablePage">jghjghjghj</div>
<div id="page3" class="selectablePage">utytyutyuty</div>

Answer 3

检查小提琴

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

// jQuery

$("#imgId1").click(function(){
    $("#divId2").hide();
    $("#divId3").hide();    
    $("#divId1").show();
});
$("#imgId2").click(function(){
    $("#divId1").hide();
    $("#divId3").hide();    
    $("#divId2").show();
});
$("#imgId3").click(function(){
    $("#divId1").hide();
    $("#divId2").hide();    
    $("#divId3").show();
});