I am trying to change an active tab when a button is clicked from inside another tab. All the examples I have found are tabs with anchor tags, none with buttons. Am I able to achieve this without changing from buttons to anchor tags? I have tried to apply the code I see for the anchor tags but that has not been successful. When I click view more, id like to switch to the referral tab
<ul id="allTab" role="tablist">
<li role="presentation">
<button id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="all" aria-selected="true">All</button>
</li>
<li role="presentation">
<button id="referral-tab" data-bs-toggle="tab" data-bs-target="#referral" type="button" role="tab" aria-controls="referral" aria-selected="false">Ref</button>
</li>
<li role="presentation">
<button id="profit-tab" data-bs-toggle="tab" data-bs-target="#profit" type="button" role="tab" aria-controls="profit" aria-selected="false">Pro</button>
</li>
<li role="presentation">
<button id="merchandise-tab" data-bs-toggle="tab" data-bs-target="#merchandise" type="button" role="tab" aria-controls="merchandise" aria-selected="false">Merch</button>
</li>
<li role="presentation">
<button id="withdrawal-tab" data-bs-toggle="tab" data-bs-target="#withdrawal" type="button" role="tab" aria-controls="withdrawal" aria-selected="false">History</button>
</li>
</ul>
<div id="walletContent">
<div id="all" role="tabpanel" aria-labelledby="all-tab">
<div >
<div >
<div >
<div>
<a >View
more</a>
</div>
<div >
<div data-value='46'>
<span >
<span ></span>
</span>
<span >
<span ></span>
</span>
<div >46%</div>
</div>
<div >Referral
<p >$120,000.00</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="referral" role="tabpanel" aria-labelledby="referral-tab">
Ref
</div>
<div id="profit" role="tabpanel" aria-labelledby="profit-tab">
Profit
</div>
<div id="merchandise" role="tabpanel" aria-labelledby="merchandise-tab">
Merch
</div>
<div id="withdrawal" role="tabpanel" aria-labelledby="withdrawal-tab">
With
</div>
</div>
CodePudding user response:
Add a reference to the button with id "referral-tab" and when the View more link is clicked, use bootrap's api to show it.
- Define the code to show the specific tab:
var triggerEl = document.getElementById('referral-tab')
var tabTrigger = new bootstrap.Tab(triggerEl)
function activateReferralsTab() {
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
}
- Attach the activateReferralsTab() function to the View more link onclick handler:
<a
onclick="activateReferralsTab()">
View more
</a>
What follows is a running example.
var triggerEl = document.getElementById('referral-tab')
var tabTrigger = new bootstrap.Tab(triggerEl)
function activateReferralsTab() {
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<ul id="allTab" role="tablist">
<li role="presentation">
<button id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="all" aria-selected="true">All</button>
</li>
<li role="presentation">
<button id="referral-tab" data-bs-toggle="tab" data-bs-target="#referral" type="button" role="tab" aria-controls="referral" aria-selected="false">Ref</button>
</li>
<li role="presentation">
<button id="profit-tab" data-bs-toggle="tab" data-bs-target="#profit" type="button" role="tab" aria-controls="profit" aria-selected="false">Pro</button>
</li>
<li role="presentation">
<button id="merchandise-tab" data-bs-toggle="tab" data-bs-target="#merchandise" type="button" role="tab" aria-controls="merchandise" aria-selected="false">Merch</button>
</li>
<li role="presentation">
<button id="withdrawal-tab" data-bs-toggle="tab" data-bs-target="#withdrawal" type="button" role="tab" aria-controls="withdrawal" aria-selected="false">History</button>
</li>
</ul>
<div id="walletContent">
<div id="all" role="tabpanel" aria-labelledby="all-tab">
<div >
<div >
<div >
<div>
<a onclick="activateReferralsTab()">View more</a>
</div>
<div >
<div data-value='46'>
<span >
<span ></span>
</span>
<span >
<span ></span>
</span>
<div >46%</div>
</div>
<div >Referral
<p >$120,000.00</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="referral" role="tabpanel" aria-labelledby="referral-tab">
Ref
</div>
<div id="profit" role="tabpanel" aria-labelledby="profit-tab">
Profit
</div>
<div id="merchandise" role="tabpanel" aria-labelledby="merchandise-tab">
Merch
</div>
<div id="withdrawal" role="tabpanel" aria-labelledby="withdrawal-tab">
With
</div>
</div>`enter code here`