gpt4 book ai didi

javascript - 更改按钮组 Bootstrap 中按钮点击的内容

转载 作者:行者123 更新时间:2023-11-29 21:50:06 30 4
gpt4 key购买 nike

enter image description here

我想通过点击按钮组中的每个按钮来更改按钮组下方的内容。

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

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com