更改按鈕自來水的內容在按鈕組引導

Question

我想改變在按鈕組每個按鈕的下方水龍頭按鈕組的內容。

<div class="btn-group btn-group-lg"> 
<button type="button" class="btn btn-primary segmentedButton ">Section1</button> 
<button type="button" class="btn btn-primary segmentedButton active">Section2</button> 
<button type="button" class="btn btn-primary segmentedButton">Section3</button> 
</div> 

我不想整個加載整個頁面。下面的內容應該改變。

現有示例爲http://sourcebits.com/app-development-portfolio/分段控件。有什麼簡單的方法來實現，使用HTML和JavaScript。

Answer 1

您可以爲每個部分創建單獨的div容器，併爲其指定id屬性。然後，在按鈕組中的每個按鈕上，附加一個屬性，該屬性指示在單擊該按鈕時它應呈現哪個div。

演示（使用JQuery）：

$(function() { 
 

 
    $(".btn").on("click", function() { 
 
    //hide all sections 
 
    $(".content-section").hide(); 
 
    //show the section depending on which button was clicked 
 
    $("#" + $(this).attr("data-section")).show(); 
 
    }); 
 

 
});

.content-section { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="btn-group btn-group-lg"> 
 
    <button type="button" data-section="section1" class="btn btn-primary segmentedButton ">Section1</button> 
 
    <button type="button" data-section="section2" class="btn btn-primary segmentedButton">Section2</button> 
 
    <button type="button" data-section="section3" class="btn btn-primary segmentedButton">Section3</button> 
 
</div> 
 

 
<div class="content-section" id="section1"> 
 
    <h1> Section 1 </h1> 
 
    <p>Section 1 Content goes here</p> 
 
</div> 
 
<div class="content-section" id="section2"> 
 
    <h1> Section 2 </h1> 
 
    <p>Section 2 Content goes here</p> 
 
</div> 
 
<div class="content-section" id="section3"> 
 
    <h1> Section 3 </h1> 
 
    <p>Section 3 Content goes here</p> 
 
</div>