显示组按钮功能的默认值

Question

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

我有这个组按钮的功能，你可以看到它总是默认隐藏所有显示值，但我希望第1节显示块在默认情况下显示它的值，而我打开这个页面时不需要点击它，当然，当我选择另一个按钮或选择它时，它会隐藏并打开。我真的是这个方面的新手，所以我如何在这个代码中归档这样的东西？。

Answer 1

$(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();
});
$(".btn").first().trigger("click");
});

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

Answer 2

方法1:

一种简单的方法是，在click事件绑定之后自动单击第一个按钮。像这样：

$(".btn").first().click()

.first()选择第一个按钮

.click()触发与您在.on中绑定的事件相同的事件

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

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

---

方法2:

另一种方法可以是：添加一个active类来显示所选的选项卡内容。单击即可切换active类以显示/隐藏选项卡的内容。首先，您可以将active类添加到要在HTML中默认显示的任何选项卡内容中。(这里我在第一个选项卡内容中添加了active类(

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

.content-section {
display: none;
}
.content-section.active {
display: block;
}

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