顯示一個div並隱藏其餘的全部

Question

現在我正在使用淡入淡出來切換點擊按鈕上的內容。

我用同樣的腳本是

function showHide(divId){ 
    if (document.getElementById(divID).style.display == "none") { 
     $('#'+divID).fadeIn(3000); 

    } else { 
     $('#'+divID).fadeOut(3000); 
    } 
} 

如何修改上面的代碼顯示在按鈕點擊的內容。

考慮我有2個按鈕

<button> button1</button> 
<button> button2</button> 


<div id="div1"> content of button 1 </div> 
<div id="div2" style="display:hidden"> content of button 2</div> 

我想告訴任何的div，點擊按鈕1時，按鈕2的含量應該是不可見的，反之亦然。

Answer 1

更新showHide

function showHide(divID) { 
    $("div").not("#" + divID).fadeOut(3000); 

選擇每一個是因爲躲在一個div不會顯示其它精細時間而消逝出來。你應該也給所有這些div的類，並用它來代替剛剛"div"

Answer 2

您可以在按鈕使用onclick事件。

<button id="button1" onclick="ShowHideDiv(this);">button1</button> 
<button id="button2" onclick="ShowHideDiv(this);">button2</button> 
<div id="div1"> content of button 1 </div> 
<div id="div2" style="display:hidden"> content of button 2</div> 

在script標記中，可以使用該函數。

function ShowHide(element) 
{ 
    if ($(element).attr("id") == "button1") 
    { 
     $("#div1").fadeIn(3000); 
     $("#div2").fadeOut(3000); 
    } 
    else if ($(element).attr("id") == "button2") 
    { 
     $("#div2").fadeIn(3000); 
     $("#div1").fadeOut(3000); 
    } 
} 

如果你想隱藏所有的div除一人外，你可以使用類似於下面的代碼：

$("div").fadeOut(3000); 

這將隱藏所有的div。
那麼這將顯示正確的DIV：

$("#divId").fadeIn(3000); 

使用適當的DIVID

Answer 3

格的標識我在JS初學者，但試試這個：

HTML：

<button id="btn1"> button1</button> 
<button id="btn2"> button2</button> 

<div id="div1"> content of button 1 </div> 
<div id="div2" class="hidden"> content of button 2</div> 

CSS：

.hidden { display: none;} 

個

JS：

$('#btn1').click(function(){ 
    $('#div2').addClass('hidden'); 
    $('#div1').removeClass('hidden'); 
}) 
$('#btn2').click(function(){ 
    $('#div1').addClass('hidden'); 
    $('#div2').removeClass('hidden'); 
}) 

這裏有一個demo。

Answer 4

請改變你的HTML到這一點：

<button id="btn1" onclick="ShowHideDiv(this);"> button1</button> 
<button id="btn2" onclick="ShowHideDiv(this);"> button</button> 


<div id="div1" class='divShowHide'> content of button 1 </div> 
<div id="div2" class='divShowHide'> content of button 2</div> 

現在試試這個代碼：

firstCall this function on domready: 

$(document).on('click',function(){ 
     $('.divShowHide').fadeOut(30); 
}); 

function ShowHideDiv(divId){ 

    $('.divShowHide').fadeOut(3000); 
    $(divId).fadeIn(3000); 

}