到目前为止，我已经尝试了所有我找到的东西，不确定还剩下什么。我只是想有两个药丸和改变内容显示取决于哪一个被点击。很简单。我试过复制Bootstrap文档中的内容，以及许多其他网站的解决方案，但都无济于事。
标题中的代码。Ejs文件包含…
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- BOOTSTRAP AND CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
问题页面上的代码是:
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Test content 1</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Test content 2</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Test content 3</div>
</div>
但我已经尝试了几种不同的解决方案来尝试解决这个问题。
同一文件的底部现在还包括:
<script>
$(".nav li a").on("click", function() {
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
</script>
现在，这使得我点击的药丸的颜色改变为我点击的那个(这以前没有发生过)，但显示的内容保持不变。
我迷路了。我很愿意学习，但是我看了很多网站和文章和视频都没有用。
您缺少锚元素上的data-bs-target属性。此属性应该具有它所连接的窗格的id。我已经为你添加了第一个。
<a class="nav-link active" data-bs-target="#pills-home" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>