HTML頁面，隱藏div顯示

我正在用HTML，bootstrap2和JS實現此效果。

對不起，我還沒有一個工作的例子，並沒有找到一個例子可以演示任何地方，所以我只會描述我想要做的細節。
這是一個普通的HTML頁面，可視化地包含兩個垂直排列的「卡片」。該卡可能只是一個div包含textbox和button。最初只有一張卡片可見，而另一張卡片是隱藏的，我希望頁面大小隻適合一張卡片。點擊卡片1上的按鈕後，頁面高度應該更大，以適應兩張卡片，卡片2顯示出來。HTML頁面，隱藏div顯示

我不確定的部分是：我最初如何隱藏div並通過單擊按鈕顯示它？（我想要的頁面大小適合任何數量的卡）我不太熟悉web開發，所以一個工作示例將非常有幫助！

謝謝！

來源

2013-08-20 Allan Jiang

這一切都歸結到操縱CSS'hidden'屬性。您可以爲兩個div上的click事件添加事件處理程序，並打開和關閉此屬性。看看jQuery.show（）和jQuery.hide（） –

這是我剛煮熟的一個很好的例子。

你應該已經有你的HTML & CSS設置，但這裏是我用過的。

HTML

<!-- Card 1 --> 
<div> 
    <textarea></textarea> 
    <button id="clickMe">Show second card</button> 
</div> 

<!-- Card 2 --> 
<div style="display: none;" id="newCard"> 
    <textarea></textarea> 
    <button>Do nothing</button> 
</div>

CSS：

div{ /* A bit of random styling */ 
    box-sizing: border-box; 
    width: 70%; 
    margin: 30px 15%; 
    background: skyblue; 
    border: 2px solid #EEE; 
    text-align:center; 
    padding: 50px; 
}

香草的Javascript

var button = document.getElementById('clickMe'); // 1 
var newCard = document.getElementById('newCard'); // 2 
button.addEventListener('click', function() {  // 3 
    newCard.style.display = 'block';    // 4 
});

INFO

獲得具有元素的ID的clickMe

獲得具有ID的newCard

傾聽時clickMe元素clicked

當clickMe是clicked元素將newCard的顯示設置爲block

工作演示：http://jsfiddle.net/T4yxz/

來源

2013-08-20 22:39:43 iConnor

你可以依靠jQuery來顯示/隱藏元素。設置一個div元素隱藏和onclick按鈕事件應該隱藏/顯示您的元素。

看看jQuery的API：

http://api.jquery.com/show/

http://api.jquery.com/toggle/

簡單的例子： http://jsfiddle.net/mrkre/KKLZ4/

$('#HideHidden').click(function() { 
    $(".hidden-div").hide(); 
}); 

$('#ShowHidden').click(function() { 
    $(".hidden-div").show(); 
});

然後，您需要操縱高度元素的CSS。

來源

2013-08-20 06:02:50 mrkre

在頁面加載時，通過將該元素的css樣式設置爲display：none，從而開始隱藏div。當你想顯示該元素時，添加一個.show（）事件到按鈕點擊功能。

來源

2013-08-20 22:24:13 TechnoBlahble

HTML頁面，隱藏div顯示

回答

相關問題