27
4
Ive been trying to use the nav-tabs (https://getbootstrap.com/docs/5.2/components/navs-tabs/#tabs) from bootstrap (version 5.2.2) in my angular application but for some reason only the content in the first tab shows while the other tabs are blank even though they have content in them. Is there something im missing? because ive followed the documentation to the letter and it still dosent work
我一直试图在我的ANGLE应用程序中使用Bootstrap(5.2.2版)中的NAV-Tabs(https://getbootstrap.com/docs/5.2/components/navs-tabs/#tabs)，但由于某种原因，只有第一个选项卡中的内容显示，而其他选项卡中的内容是空白的，尽管它们中有内容。我是不是遗漏了什么？因为我严格遵循了文档，但它仍然不起作用
个人中心
文章发布
退出 <div class="card border-0">
<div class="card-header white-background d-flex justify-content-around">
<ul class="nav nav-underline card-header-tabs pt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="domestic-tab" data-bs-toggle="tab"
data-bs-target="#domestic-tab-pane" type="button" role="tab"
aria-controls="domestic-tab-pane" aria-selected="true">Domestic Transfer</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="international-tab" data-bs-toggle="tab"
data-bs-target="international-tab-pane" type="button" role="tab"
aria-controls="international-tab-pane" aria-selected="false">International
Transfer</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="intrabank-tab" data-bs-toggle="tab"
data-bs-target="intrabank-tab-pane" type="button" role="tab"
aria-controls="intrabank-tab-pane" aria-selected="false">Intrabank Transfer</button>
</li>
</ul>
</div>
<div class="card-body ">
<div class="tab-content">
<div class="tab-pane show fade active" id="domestic-tab-pane" role="tabpanel"
aria-labelledby="domestic-tab" tabindex="0">
<div class="row pb-4 pt-3">
<div class="col">
<label for="accountInput" class="form-label">Recipient Account Number</label>
<input type="text" class="form-control form-control-lg border border-dark" id="accountInput" aria-label="Account number">
</div>
<div class="col">
<label for="bankInput" class="form-label">Recipient Bank</label>
<input type="text" class="form-control form-control-lg border border-dark" id="bankInput" aria-label="Bank">
</div>
</div>
<div class="row pb-4">
<div class="col">
<label for="amountInput" class="form-label">Amount</label>
<input type="text" class="form-control form-control-lg border border-dark" id="amountInput" aria-label="Amount">
</div>
<div class="col">
<label for="pinInput" class="form-label">Pin</label>
<input type="text" class="form-control form-control-lg border border-dark" id="pinInput" aria-label="Pin">
</div>
</div>
<div class="form-check">
<input class="form-check-input border border-dark border-2 py-2 px-2 me-2 " type="checkbox" value="" id="addBeneficiary">
<label class="form-check-label my-1" for="addBeneficiary">
Add to Beneficiary
</label>
</div>
<div class="row py-4">
<div class="col text-center">
<button button type="button" class="btn btn-light primary-bg btn-lg w-50"><span class="grey-light">Submit</span></button>
</div>
</div>
</div>
<div class="tab-pane fade" id="international-tab-pane" role="tabpanel"
aria-labelledby="international-tab" tabindex="1">
<div class="row pb-4 pt-3">
<div class="col">
<label for="accountInput" class="form-label">Recipient Account Number</label>
<input type="text" class="form-control form-control-lg border border-dark" id="accountInput" aria-label="Account number">
</div>
<div class="col">
<label for="bankInput" class="form-label">Recipient Bank</label>
<input type="text" class="form-control form-control-lg border border-dark" id="bankInput" aria-label="Bank">
</div>
</div>
<div class="row pb-4">
<div class="col">
<label for="amountInput" class="form-label">Amount</label>
<input type="text" class="form-control form-control-lg border border-dark" id="amountInput" aria-label="Amount">
</div>
<div class="col">
<label for="pinInput" class="form-label">Pin</label>
<input type="text" class="form-control form-control-lg border border-dark" id="pinInput" aria-label="Pin">
</div>
</div>
<div class="form-check">
<input class="form-check-input border border-dark border-2 py-2 px-2 me-2 " type="checkbox" value="" id="addBeneficiary">
<label class="form-check-label my-1" for="addBeneficiary">
Add to Beneficiary
</label>
</div>
<div class="row py-4">
<div class="col text-center">
<button button type="button" class="btn btn-light primary-bg btn-lg w-50"><span class="grey-light">Submit</span></button>
</div>
</div>
</div>
<div class="tab-pane fade" id="intrabank-tab-pane" role="tabpanel"
aria-labelledby="intrabank-tab" tabindex="0">
</div>
</div>
</div>
</div>
Ive tried changing the names of the id's on each tab to see if thats the issue, ive also tried changing the tab indexes but nothing still shows on the other tabs
我已经尝试更改每个选项卡上ID的名称以确定这是否是问题所在，我也尝试了更改选项卡索引，但其他选项卡上仍然没有显示任何内容
The two mentioned tabs are not working because they don't have correct element id selector provided in the data-bs-target attribute (they're missing #, so the elements cannot be found).
上面提到的两个选项卡不起作用，因为它们没有在data-bs-target属性中提供正确的元素id选择器（它们缺少#，因此无法找到元素）。
So, add the correct selectors:
因此，添加正确的选择器：
data-bs-target="#international-tab-pane"
data-bs-target="#intrabank-tab-pane"
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="card border-0">
<div class="card-header white-background d-flex justify-content-around">
<ul class="nav nav-underline card-header-tabs pt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="domestic-tab" data-bs-toggle="tab" data-bs-target="#domestic-tab-pane" type="button" role="tab" aria-controls="domestic-tab-pane" aria-selected="true">Domestic Transfer</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="international-tab" data-bs-toggle="tab" data-bs-target="#international-tab-pane" type="button" role="tab" aria-controls="international-tab-pane" aria-selected="false">International
Transfer</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="intrabank-tab" data-bs-toggle="tab" data-bs-target="#intrabank-tab-pane" type="button" role="tab" aria-controls="intrabank-tab-pane" aria-selected="false">Intrabank Transfer</button>
</li>
</ul>
</div>
<div class="card-body ">
<div class="tab-content">
<div class="tab-pane show fade active" id="domestic-tab-pane" role="tabpanel" aria-labelledby="domestic-tab" tabindex="0">
<div class="row pb-4 pt-3">
<div class="col">
<label for="accountInput" class="form-label">Recipient Account Number</label>
<input type="text" class="form-control form-control-lg border border-dark" id="accountInput" aria-label="Account number">
</div>
<div class="col">
<label for="bankInput" class="form-label">Recipient Bank</label>
<input type="text" class="form-control form-control-lg border border-dark" id="bankInput" aria-label="Bank">
</div>
</div>
<div class="row pb-4">
<div class="col">
<label for="amountInput" class="form-label">Amount</label>
<input type="text" class="form-control form-control-lg border border-dark" id="amountInput" aria-label="Amount">
</div>
<div class="col">
<label for="pinInput" class="form-label">Pin</label>
<input type="text" class="form-control form-control-lg border border-dark" id="pinInput" aria-label="Pin">
</div>
</div>
<div class="form-check">
<input class="form-check-input border border-dark border-2 py-2 px-2 me-2 " type="checkbox" value="" id="addBeneficiary">
<label class="form-check-label my-1" for="addBeneficiary">
Add to Beneficiary
</label>
</div>
<div class="row py-4">
<div class="col text-center">
<button button type="button" class="btn btn-light primary-bg btn-lg w-50"><span class="grey-light">Submit</span></button>
</div>
</div>
</div>
<div class="tab-pane fade" id="international-tab-pane" role="tabpanel" aria-labelledby="international-tab" tabindex="1">
<div class="row pb-4 pt-3">
<div class="col">
<label for="accountInput" class="form-label">Recipient Account Number</label>
<input type="text" class="form-control form-control-lg border border-dark" id="accountInput" aria-label="Account number">
</div>
<div class="col">
<label for="bankInput" class="form-label">Recipient Bank</label>
<input type="text" class="form-control form-control-lg border border-dark" id="bankInput" aria-label="Bank">
</div>
</div>
<div class="row pb-4">
<div class="col">
<label for="amountInput" class="form-label">Amount</label>
<input type="text" class="form-control form-control-lg border border-dark" id="amountInput" aria-label="Amount">
</div>
<div class="col">
<label for="pinInput" class="form-label">Pin</label>
<input type="text" class="form-control form-control-lg border border-dark" id="pinInput" aria-label="Pin">
</div>
</div>
<div class="form-check">
<input class="form-check-input border border-dark border-2 py-2 px-2 me-2 " type="checkbox" value="" id="addBeneficiary">
<label class="form-check-label my-1" for="addBeneficiary">
Add to Beneficiary
</label>
</div>
<div class="row py-4">
<div class="col text-center">
<button button type="button" class="btn btn-light primary-bg btn-lg w-50"><span class="grey-light">Submit</span></button>
</div>
</div>
</div>
<div class="tab-pane fade" id="intrabank-tab-pane" role="tabpanel" aria-labelledby="intrabank-tab" tabindex="0">
sdfsdd
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
See Bootstrap source code about the selectors:
请参阅有关选择器的Bootstrap源代码：
let selector = element.getAttribute('data-bs-target')
if (!selector || selector === '#') {
let hrefAttribute = element.getAttribute('href')
// The only valid content that could double as a selector are IDs or classes,
// so everything starting with `#` or `.`. If a "real" URL is used as the selector,
// `document.querySelector` will rightfully complain it is invalid.
// See https://github.com/twbs/bootstrap/issues/32273
if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) {
return null
}
https://github.com/twbs/bootstrap/blob/main/js/src/dom/selector-engine.js#L11
https://github.com/twbs/bootstrap/blob/main/js/src/dom/selector-engine.js#L11
27
4
0
我是一名优秀的程序员,十分优秀！