顯示div並隱藏另一個div按按鈕

-3

我有兩個div。我需要2個按鈕，每個按鈕一個。顯示第一個div，但第二個隱藏。當我按下第二個div的按鈕時，它會顯示，第一個div將隱藏起來。再次，當我按下第一個div的按鈕時，第一個div將顯示，第二個將隱藏。我需要這兩個按鈕的html和js代碼。請幫忙。 :)顯示div並隱藏另一個div按按鈕

來源

2016-08-18 Danny

什麼都有你嘗試過et c。我們在這裏幫助修改和修復您的代碼，但不適合您的功能。 – Option

你有.hide（）和.show（）的jquery做到這一點 –

我coundn't找到一個精確的jsfiddle答案。我只想要一個簡單的按鈕顯示開關。 – Danny

$('button').click(function(){  
 
    if(this.id == 'btn1'){ 
 
    $('.div1').show(); 
 
    $('.div2').hide(); 
 
    }else{ 
 
    $('.div1').hide(); 
 
    $('.div2').show(); 
 
    } 
 
})

div{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background: cornflowerblue; 
 
    line-height: 200px; 
 
    text-align: center; 
 
    margin: 10px; 
 
} 
 

 
.div1{ 
 
    display: block; 
 
    background: crimson; 
 
} 
 

 
.div2{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div1"> 
 
    DIV 1 
 
</div> 
 

 
<div class="div2"> 
 
    DIV 2 
 
</div> 
 

 
<button id="btn1">show Div 1</button> 
 
<button id="btn2">show Div 2</button>

來源

2016-08-18 09:21:58 z0mBi3

function onButton1Click(){ 
    document.getElementById('mybox1').style.display = ""; 
    document.getElementById('mybox2').style.display = "none"; 
} 

function onButton2Click(){ 
    document.getElementById('mybox2').style.display = ""; 
    document.getElementById('mybox1').style.display = "none"; 
}

我覺得上面的代碼應該做

來源

2016-08-18 09:16:23 anandharshan

假設第一個按鈕的那個ID是 'BTN1' 第二個按鈕的ID是 'BTN2' 第一個div id爲「DIV1」和第二個div ID是'div2'。

<script> 
      $('#btn1').click(function(){ 
       $('#div2').show(); 
       $('#div1').hide(); 
      }); 

     $('#btn2').click(function(){ 
      $('#div2').hide(); 
      $('#div1').show(); 
     }); 
     </script>

來源

2016-08-18 09:19:38

<button id='button1'>1</button> 
<button id='button2'>2</button> 

<div id='div1'>example 1</div> 
<div id='div2'>example 2</div>  

$(function(){ 

    $('#button1').on('click',function(){ 
    $('#div1').show(); 
    $('#div2').hide(); 
    }); 

    $('#button2').on('click',function(){ 
    $('#div2').show(); 
    $('#div1').hide(); 
    }); 

});

$（函數（）{相同$（文件）。就緒（函數（）{用於當文檔準備好。
上的方法是關聯到在這種情況下
顯示（）一個事件點擊事件和隱藏（）方法是如名稱暗示顯示或隱藏關聯到被調用的方法的元素。

https://jsfiddle.net/xzL75y8z/

來源

2016-08-18 09:19:40

可能，這將幫助你

的第一個按鈕點擊事件

document.getElementById('SecondDiveId').style.display='none'; 
document.getElementById('firstDiveId').style.display='block';

的第二個按鈕點擊事件

document.getElementById('FirstDiveId').style.display='none'; 
document.getElementById('SecondDiveId').style.display='block';

來源

2016-08-18 09:21:39 Ankit

這是你所期望的嗎？

<div id="DivOne">Div One 
</div> 
<button id="hideshow1" class="btn btn-primary">click 1 </button> 

<div id="DivTwo">Div Two  
</div> 
<button id="hideshow2" class="btn btn-primary">click 2 </button>

jQuery的

$("#hideshow1").click(function(){ 

    $("#DivTwo").hide(); 
    $("#DivOne").show(); 
}); 


$("#hideshow2").click(function(){ 
    $("#DivOne").hide(); 
    $("#DivTwo").show(); 
});

來源

2016-08-18 09:26:37 Simo

試試這個希望工程。

<div align="center" id = "idsample"> 
      .... 
     </div> 


$("#buttonid").click(function (event) { 
    $(#idsample).hide(); 
};

來源

2016-08-18 09:27:06

你可以用一個按鈕來切換div。但是，我不知道你的要求的背景，所以在這裏你去...小小提琴

$('.btn-one').on('click', function(){ 
    $('.one').show(); 
    $('.two').hide(); 
}); 

$('.btn-two').on('click', function(){ 
    $('.two').show(); 
    $('.one').hide(); 
});

鏈接，fiddle

來源

2016-08-18 09:29:49

使用這種簡單的JavaScript代碼：

HTML DIV：

<div id="showInput" style="overflow-x: auto; display: none;"> 
    //yourdata 
</div> 
<input class="abc" onclick="showInput()" type="button" value="abc" />

和javascript函數

function showInput(){ 
    document.getElementById('showInput').style.display='block'; 
}

來源

2016-08-18 09:31:40

顯示div並隱藏另一個div按按鈕

回答

相關問題