Navigate to next tab - on button click

Question

I have requirement where need to move to next tab on clicking on "Next button" using SLDS tab, Not lightning tabset. below is the code, using that i'm able to move next tab on clicking on tab. I need to move to next tab on click on Next button. I'll appreciate your help!!. Thank you!.

HTML:

<template>
<div class="slds-tabs_default">
    <ul class="slds-grid slds-gutters slds-tabs_default__nav tab-container" role="tablist">
        <li class="slds-col slds-tabs_default__item slds-is-active" title="Item One" role="presentation"
            onclick={tabClick}>
            <a class="slds-align_absolute-center slds-tabs_default__link" href="javascript:void(0);" role="tab"
                tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item
                One</a>
        </li>
        <li class="slds-col slds-tabs_default__item" title="Item Two" role="presentation" onclick={tabClick}>
            <a class="slds-align_absolute-center slds-tabs_default__link" href="javascript:void(0);" role="tab"
                tabindex="0" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item
                Two</a>
        </li>
        <li class="slds-col slds-tabs_default__item" title="Item Two" role="presentation" onclick={tabClick}>
            <a class="slds-align_absolute-center slds-tabs_default__link" href="javascript:void(0);" role="tab"
                tabindex="0" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item">Item
                Three</a>
        </li>
        <li class="slds-col slds-tabs_default__item" title="Item Two" role="presentation" onclick={tabClick}>
            <a class="slds-align_absolute-center slds-tabs_default__link" href="javascript:void(0);" role="tab"
                tabindex="0" aria-selected="false" aria-controls="tab-default-4" id="tab-default-4__item">Item
                Four</a>
        </li>
    </ul>
    <div id="tab-default-1" class="tab-default-1 slds-tabs_default__content slds-show" role="tabpanel"
        aria-labelledby="tab-default-1__item">Item One Content</div>
    <div id="tab-default-2" class="tab-default-2 slds-tabs_default__content slds-hide" role="tabpanel"
        aria-labelledby="tab-default-2__item">Item Two Content</div>
    <div id="tab-default-3" class="tab-default-3 slds-tabs_default__content slds-hide" role="tabpanel"
        aria-labelledby="tab-default-3__item">Item Three Content</div>
    <div id="tab-default-4" class="tab-default-4 slds-tabs_default__content slds-hide" role="tabpanel"
        aria-labelledby="tab-default-4__item">Item Four Content</div>
</div>
</template>

JS:

    tabClick(e) {
const allTabs = this.template.querySelectorAll('.slds-tabs_default__item');
allTabs.forEach((elm, idx) => {
    elm.classList.remove("slds-is-active");
});
e.currentTarget.classList.add('slds-is-active');
var element = e.currentTarget.firstChild.id;

var selectedelementarea = element.substr(0, element.indexOf('_'));;

const tabview = this.template.querySelectorAll('.slds-tabs_default__content');
tabview.forEach((elm, idx) => {
    elm.classList.remove("slds-show");
    elm.classList.add("slds-hide");
});
this.template.querySelector(`.${selectedelementarea}`).classList.remove("slds-hide");
this.template.querySelector(`.${selectedelementarea}`).classList.add("slds-show");

}

sfdcfox · Accepted Answer · 2022-10-29 20:31:33Z

You just need to find the appropriate tab, then move to the next one.

In order to facilitate this, I cleaned up/refactored the tabClick function and moved it to its own function:

getAllTabs() {
  return [...this.template.querySelectorAll('.slds-tabs_default__item')];
}
getCurrentTab() {
  return this.getAllTabs().findIndex((tab) => tab.classList.contains('slds-is-active'));
}
setNewTab(index) {
  const allTabs = this.getAllTabs();
  const tabElement = allTabs[index];
  allTabs.forEach((tab)=>tab.classList.remove('slds-is-active'));
  tabElement.classList.add('slds-is-active');
  const tabContent = this.template.querySelectorAll('.slds-tabs_default__content');
  tabContent.forEach((elm) => { 
    elm.classList.remove("slds-show");
    elm.classList.add("slds-hide");
  });
  tabContent[index].classList.remove("slds-hide");
  tabContent[index].classList.add("slds-show");
}

The new helper functions weren't required, but I like the "DRY" (Don't Repeat Yourself) pattern.

Next, we can fix tabClick:

tabClick(e) {
  const allTabs = this.getAllTabs();
  const newIndex = allTabs.findIndex((tab)=>tab === e.currentTarget);
  this.setNewTab(newIndex);
}

And finally, for our new button, we add a nextTab function:

nextTab() {
  this.setNewTab(
    (this.getCurrentTab()+1)%this.getAllTabs().length
  );
}

This method wraps around; you can disable that part if you don't need it.

Demo.

Awesome!! it worked. Thank you,@sfdcfox

Ganesh Hegde
– Ganesh Hegde

2022-10-30 16:34:53 +00:00
Commented Oct 30, 2022 at 16:34 — Ganesh Hegde
– Ganesh Hegde, Commented Oct 30, 2022 at 16:34

Stack Exchange Network

Navigate to next tab - on button click

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Navigate to next tab - on button click

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions