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显示

回答

相关问题