Contextual Background
In my exploration of Sveltekit, I set out to construct a dashboard using Bootstrap tab components. To achieve this, I opted to utilize <buttons> instead of <a> tags to prevent redirection to different routes. My goal was to dynamically change the page content based on the selected button, hence my choice to use buttons.
Prior to this project, I verified that Bootstrap was correctly integrated into my setup by testing it with various components.
I am working with the latest versions of SvelteKit and Bootstrap (5.3) at the time of implementation.
The Issue at Hand
Upon loading the page, the first tab component fails to receive the active class, which it should. I attempted solutions like utilizing onMount functions to reassign the active class to the first tab without success.
If anyone could provide assistance, it would be greatly appreciated. Please feel free to inquire if more information is required regarding my query.
<script>
const firstTabItem = {
id: "0",
title: "Home"
};
const tabItems = [
{
id: "1",
title: "About us"
},
{
id: "2",
title: "Products"
},
{
id: "3",
title: "Contact"
},
]
let currentTab = 0;
</script>
<h1>Dashboard</h1>
<ul class="nav nav-tabs">
<button class="nav-link" class:active={firstTabItem.id === currentTab} on:click={() => {currentTab = firstTabItem.id}}>{firstTabItem.title}</button>
{#each tabItems as item}
<button class="nav-link" class:active={item.id === currentTab} on:click={() => {currentTab = item.id}}>{item.title}</button>
{/each}
</ul>