Question

我对javascript很新，但我想知道如何做一些事情。基本上我有3个图像按钮。我想知道如何实现这一点当你单击第一个按钮显示div时，然后当你单击下一个按钮时，存在的div消失，下一个div显示为按钮2的位置。通过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; 
 }

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

检查Fiddle

<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();
});

onClick图片，显示div内容

3 个答案: