按鈕，允許不同的內容

Question

我目前正在我的個人網站上工作，現在我正在嘗試創建按鈕，以允許我顯示關於同一主題的不同文本。我爲了更加精確，這裏有兩個圖像：

Button Text 1

Button Text 2

所以當按鈕「信息」是活動的，顯示的文本是所有的，我要描述的信息項目，當「積分」處於活動狀態時，顯示的文字更具技術性（列表）。這兩個文本都需要顯示在同一個地方。

我目前使用boostrap在我自己的devlopping我的網站，我不知道在哪裏尋找解決方案（HTML/CSS）或腳本（Javascript）。

請讓我知道，如果你需要更多的信息給我正確的答案！

預先感謝您

Answer 1

您可以使用引導標籤：http://getbootstrap.com/javascript/#tabs

如果你願意，你也可以使用jQuery：https://jqueryui.com/tabs/

Answer 2

既然你說你正在使用bootstrap，你可以使用tab組件，代碼示例如下：

<div> 

    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"><a href="#image1" aria-controls="image1" role="tab" data-toggle="tab">Image 1</a></li> 
    <li role="presentation"><a href="#image2" aria-controls="image2" role="tab" data-toggle="tab">Image 2</a></li> 

    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="image1"> 
     <h1>Image 1!</h1> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="image2"> 
     <h2>Image 2!</h2> 
    </div> 

    </div> 

</div> 

你會當然用你自己的內容替換這兩個標籤的內容:)。我在這裏放置了兩個標題（h1）作爲示例。

注意;我假設你正在使用bootstrap版本3. *。

Answer 3

爲什麼不嘗試白手起家可摺疊 可摺疊

Lorem存有悲文本....