search

maxwell-ilai / Leaflet.SidePanel

Leaflet plugin
MIT License
36 stars 7 forks source link

Switching tabs method #6

Closed akera099 closed 1 year ago

akera099 commented 1 year ago

Anyone knows a way to pragmatically switch which tab is displayed using JS?

I've been scratching my head on this and I can't get anything it to actually work.

akera099 commented 1 year ago

Answered my own question. Here's how you can do it, considering your tabs look like this:

<body>
<li class="sidepanel-tab">
    <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-2">
    </a>
</li>
</body>
<script>
function changeTab() {
// Change "2" to the index of the tab you want to activate (starting from 1)
const tabIndexToActivate = 2;

// Find the <a> tag that corresponds to the desired tab
const tabLink = document.querySelector(`.sidebar-tab-link[data-tab-link="tab-${tabIndexToActivate}"]`);

// Dispatch a click event on the <a> tag to activate the tab
tabLink.dispatchEvent(new Event('click'));
}
</script>