如何使用jQuery Bootstrap在按鈕單擊上顯示特定的div

Question

我在一個按鈕組中有四個按鈕，我希望一個特定的按鈕在單擊時必須顯示一些特定的div內容。

內容必須根據單擊哪個按鈕來顯示。

如何在asp.net中使用Twitter Bootstrap jQuery做到這一點？

Answer 1

以下是使用jQuery一種方法

$('.btn-group').find('button').click(function () {
    alert($(this).text());
    // here you can check the value and act upon
});

JSFiddle

Answer 2

您可以使用bootstrap Collapse 。 根據文檔：

只需將data-toggle =“ collapse”和一個data-target添加到元素即可自動分配對可折疊元素的控制權。 data-target屬性接受CSS選擇器來應用折疊。 確保將類折疊添加到可折疊元素中。 如果您希望它默認打開，請在其中添加其他類。

這是一個基本的演示。 http://www.bootply.com/jIyBm4IaoL 。

HTML：

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo1">
    btn1 
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo2">
    btn2
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo3">
    btn3
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo4">
    btn4
</button>
<div id="demo1" class="collapse">
    ddassdfsdf
</div>
<div id="demo2" class="collapse">
    2343434  
</div>
<div id="demo3" class="collapse">
    465656 vbgtrsdf
</div>
<div id="demo4" class="collapse">
    4545bn c sasdasdfasd
</div>