Fix : inversion des onglets du pad de donation
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Les boutons d'onglets étaient associés aux containers par index, mais l'ordre dans le DOM était inversé (one-off avant monthly). Correction via data-tab sur les boutons pour un lien explicite. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
4c4a96df1e
commit
25fe91ea93
3 changed files with 14 additions and 10 deletions
|
|
@ -74,17 +74,21 @@
|
|||
|
||||
function initTabs() {
|
||||
const tabButtons = document.querySelectorAll('.nav--tabs__btn');
|
||||
const containers = document.querySelectorAll('.donation-grid');
|
||||
|
||||
tabButtons.forEach((button, index) => {
|
||||
tabButtons.forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
tabButtons.forEach((btn) => btn.classList.remove('is-selected'));
|
||||
containers.forEach((container) =>
|
||||
container.classList.remove('is-selected')
|
||||
const target = button.dataset.tab;
|
||||
const container = document.querySelector(
|
||||
`.donation-grid[data-donation="${target}"]`
|
||||
);
|
||||
|
||||
tabButtons.forEach((btn) => btn.classList.remove('is-selected'));
|
||||
document
|
||||
.querySelectorAll('.donation-grid')
|
||||
.forEach((c) => c.classList.remove('is-selected'));
|
||||
|
||||
button.classList.add('is-selected');
|
||||
containers[index].classList.add('is-selected');
|
||||
container.classList.add('is-selected');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,8 +131,8 @@ $data = getContent('en');
|
|||
<div class="col-right">
|
||||
<section id="section__donation">
|
||||
<nav class="nav--tabs">
|
||||
<button class="nav--tabs__btn is-selected">Monthly donation</button>
|
||||
<button class="nav--tabs__btn">One-time donation</button>
|
||||
<button class="nav--tabs__btn is-selected" data-tab="monthly">Monthly donation</button>
|
||||
<button class="nav--tabs__btn" data-tab="one-off">One-time donation</button>
|
||||
</nav>
|
||||
|
||||
<div data-donation="one-off" class="donation-grid">
|
||||
|
|
|
|||
|
|
@ -131,8 +131,8 @@ $data = getContent('fr');
|
|||
<div class="col-right">
|
||||
<section id="section__donation">
|
||||
<nav class="nav--tabs">
|
||||
<button class="nav--tabs__btn is-selected">Je donne tous les mois</button>
|
||||
<button class="nav--tabs__btn">Je donne une fois</button>
|
||||
<button class="nav--tabs__btn is-selected" data-tab="monthly">Je donne tous les mois</button>
|
||||
<button class="nav--tabs__btn" data-tab="one-off">Je donne une fois</button>
|
||||
</nav>
|
||||
|
||||
<div data-donation="one-off" class="donation-grid">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue