我有一组Bootstrap选项卡，但是如果我从第一个选项卡单击到另一个选项卡，然后又回到第一个选项卡，则第一个选项卡的内容将替换为最后单击的选项卡的内容。我不知道为什么会这样，无法找到解决问题的办法。
我已经做了很多谷歌搜索，找不到任何解决方案。
<div class="col">
<h3>Account Settings</h3>
<ul class="nav nav-tabs mt-4" id="settingsTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="true">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#followers" role="tab" aria-controls="followers" aria-selected="false">Followers</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#following" role="tab" aria-controls="following" aria-selected="false">Following</a>
</li>
</ul>
<div class="tab-content" id="settingsContent">
<div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
<div class="mt-5">
<h4>Change Username</h4>
<form action="/account" method="POST">
<div class="row">
<div class="col-6">
<input type="text" class="form-control" name="newUsername" placeholder="New Username" />
</div>
</div>
<div class="row">
<div class="col-6 pb-5 border-bottom">
<input type="text" class="form-control mt-3" name="confirmUsername" placeholder="Confirm Username" />
<input type="submit" class="btn btn-sm btn-secondary mt-2" value="Save" />
</div>
</div>
</form>
</div>
<div class="mt-5">
<h4>Change Password</h4>
<form action="/account" method="POST">
<div class="row">
<div class="col-6">
<input type="password" class="form-control" name="newPassword" placeholder="New Password" />
</div>
</div>
<div class="row">
<div class="col-6 pb-5 border-bottom">
<input type="password" class="form-control mt-3" name="confirmPassword" placeholder="Confirm Password" />
<input type="submit" class="btn btn-sm btn-secondary mt-2" value="Save" />
</div>
</div>
</form>
</div>
</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
<div>
This is the settings tab
</div>
</div>
<div class="tab-pane fade" id="followers" role="tabpanel" aria-labelledby="followers-tab">
This is the followers tab
</div>
<div class="tab-pane fade" id="following" role="tabpanel" aria-labelledby="following-tab">
This is the following tab
</div>
</div>
</div>
单击返回第一个选项卡时，应显示实际内容，而不是最后单击的选项卡的内容。这真让我感到困惑。帮助将不胜感激！
答案 0 :(得分：0)
没有问题，可以正常工作。顺便说一句，如果在调用或订购CDN /库时遇到问题，以下是您的理想选择。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="col">
<h3>Account Settings</h3>
<ul class="nav nav-tabs mt-4" id="settingsTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="true">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#followers" role="tab" aria-controls="followers" aria-selected="false">Followers</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#following" role="tab" aria-controls="following" aria-selected="false">Following</a>
</li>
</ul>
<div class="tab-content" id="settingsContent">
<div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
<div class="mt-5">
<h4>Change Username</h4>
<form action="/account" method="POST">
<div class="row">
<div class="col-6">
<input type="text" class="form-control" name="newUsername" placeholder="New Username" />
</div>
</div>
<div class="row">
<div class="col-6 pb-5 border-bottom">
<input type="text" class="form-control mt-3" name="confirmUsername" placeholder="Confirm Username" />
<input type="submit" class="btn btn-sm btn-secondary mt-2" value="Save" />
</div>
</div>
</form>
</div>
<div class="mt-5">
<h4>Change Password</h4>
<form action="/account" method="POST">
<div class="row">
<div class="col-6">
<input type="password" class="form-control" name="newPassword" placeholder="New Password" />
</div>
</div>
<div class="row">
<div class="col-6 pb-5 border-bottom">
<input type="password" class="form-control mt-3" name="confirmPassword" placeholder="Confirm Password" />
<input type="submit" class="btn btn-sm btn-secondary mt-2" value="Save" />
</div>
</div>
</form>
</div>
</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
<div>
This is the settings tab
</div>
</div>
<div class="tab-pane fade" id="followers" role="tabpanel" aria-labelledby="followers-tab">
This is the followers tab
</div>
<div class="tab-pane fade" id="following" role="tabpanel" aria-labelledby="following-tab">
This is the following tab
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>