更改按钮组中按钮点击的内容 bootstrap

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>

更改按钮组中按钮点击的内容 bootstrap

Change the contents on button tap in button group bootstrap

javascript

twitter-bootstrap-3

buttongroup