作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想通过点击按钮组中的每个按钮来更改按钮组下方的内容。
<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 来实现。
最佳答案
您可以为每个部分创建单独的 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>
关于javascript - 更改按钮组 Bootstrap 中按钮点击的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29721421/
我是一名优秀的程序员,十分优秀!