如何在show/hide切換中只使用「show」？

現在用下面的腳本來顯示按鈕/隱藏DIV點擊如何在show/hide切換中只使用「show」？

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

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

這是我的HTML：

<button onClick="showHide('hideDiv',this.id)" type="button">English</button> 
<button onClick="showHide('hideDiv',this.id)" type="button">Math</button> 
<button onClick="showHide('hideDiv',this.id)" type="button">French</button>

，並使用一個單一的div來顯示按鈕上點擊

內容

<div id="hideDiv" style="display:none;"> 
    <p>A painting workshop in the early Renaissance probably resembled</p> 
</div>

當我點擊數學英語後，內容將隱藏，再次點擊一次後，內容再次顯示。但是，我想在用戶點擊任何按鈕時顯示內容，我想在此隱藏「隱藏」屬性，以便用戶無論點擊哪個按鈕都能看到內容。

這裏是小提琴鏈接http://jsfiddle.net/ytyAd/

來源

2013-04-08 user1165077

我不明白。什麼時候div應該隱藏，什麼時候應該可見？ – Aioros 2013-04-08 13:03:32

用你的問題創建一個jsFiddle，因爲你的內聯顯示風格：無，應該在頁面加載時默認隱藏你的內容。但是你聲稱它不是。所以繼續，並設置一個jsFiddle與您的問題。 – blackhawk 2013-04-08 13:05:35

內容應該是可見的，無論用戶點擊哪個按鈕（英語/法語/數學） – user1165077 2013-04-08 13:09:38

你需要這樣的事？

Live Demo Here

HTML

<button id="engbutton" class="button" type="button">English</button> 
<button id="mathbutton" class="button" type="button">Math</button> 
<button id="frenchbutton" class="button" type="button">French</button> 
<div id="engbuttonDiv" style="display:none;" class="ContentDiv"> 
    <p>This is English Div</p> 
</div> 
<div id="mathbuttonDiv" style="display:none;" class="ContentDiv"> 
    <p>This is Maths Div</p> 
</div> 
<div id="frenchbuttonDiv" style="display:none;" class="ContentDiv"> 
    <p>This is French Div</p> 
</div>

CSS

.ContentDiv 
{ 
    height:50px; 
    width:200px; 
    background:green; 
}

jQuery的

$(".button").click(function(){ 
     $(".ContentDiv").hide(); 
     var divid = $(this).attr("id") + "Div"; 
     if($("#"+divid).css('display') == 'none') 
     { 
      $("#"+divid).fadeIn(3000); 
     } 
     else 
     { 
      $("#"+divid).fadeOut(3000); 
     } 
    });

來源

2013-04-08 13:16:19

關閉，但是當我點擊數學按鈕，包含英語的div應該被隱藏......或者，英語內容應該被數學替換爲同一個div – user1165077 2013-04-08 13:18:39

請查看更新的答案 – 2013-04-08 13:19:38

這就是我認爲你正在尋找... http://jsfiddle.net/ytyAd/10/

JS把這個在$（文件）。就緒（）：

HTML：

<button class="showHide" type="button">English</button> 
<button class="showHide" type="button">Math</button> 
<button class="showHide" type="button">French</button> 

<div id="hideDiv"> 
    <p id="English" style="display:none;">english stuff</p> 
    <p id="Math" style="display:none;">math stuff</p> 
    <p id="French" style="display:none;">french stuff</p> 
</div>

當然你可以玩它（不同的動畫，回調等），以適應你的環境

來源

2013-04-08 13:28:15 smerny

HTML：

<div class="buttons"> 
<button id="engbutton" class="button" type="button">English</button> 
<button id="mathbutton" class="button" type="button">Math</button> 
<button id="frenchbutton" class="button" type="button">French</button> 
</div> 
<div class="contents">  
<div id="engbuttonDiv" style="display:none;" class="ContentDiv"> 
    <p>This is English Div</p> 
</div> 
<div id="mathbuttonDiv" style="display:none;" class="ContentDiv"> 
    <p>This is Maths Div</p> 
</div> 
<div id="frenchbuttonDiv" style="display:none;" class="ContentDiv"> 
    <p>This is French Div</p> 
</div> 
</div>

JS：

$('.button').on('click', function(){ 
     $('.contents').find('div').hide(); 
     var getMessageDiv = '#'+$(this).attr('id')+"Div"; 
     if ($(getMessageDiv).is(':visible')) 
     $(getMessageDiv).fadeOut(); 
     else 
     $(getMessageDiv).fadeIn(); 
    })

LIVE Demo

來源

2013-04-08 13:30:42 alix

如何在show/hide切換中只使用「show」？

回答

相關問題