更改按钮组引导程序中按钮的内容

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）：

＆＃13;

＆＃13;

$(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();
  });

});

＆＃13;

.content-section {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;