Click Function for Tabs
I'm trying to create multiple tabs that display different text upon user click but I can't seem to get the different displays with the click function to work. Any recommendations?
<!-- Tabs -->
<div class="tab-interface flex flex-wrap justify-center -mb-px" id = "display-tabs" role="tablist" aria-label="Sample Tabs">
<span role="tab" class="mr-2 inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" aria-selected="false" aria-controls="panel-1" id="tab-1" tabindex="0"> tab 1 </span>
<span role="tab" class="mr-2 inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" aria-selected="false" aria-controls="panel-1" id="tab-2" tabindex="0"> tab 2 </span>
<!-- Tab Content -->
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Tab 1</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2">
<p>Tab 2</p>
</div>
</div>
<!-- Click function for tabs -->
<script>
$("#display-tabs").click(function(){
$("#display-tabs").attr("aria-selected","false"); //deselect all the tabs
alert( "Tab selected" );
$(this).attr("aria-selected","true"); // select this tab
});
</script>
Hi there,
As far as I can see you are trying to use JQuery and if the functionality is not working, then it is most likely that you've not included the JQuery library.
What I could suggest instead is to use Alpine.js, here is a quick example:
<div class="tab-wrapper" x-data="{ activeTab: 0 }">
<div class="flex">
<label
@click="activeTab = 0"
class="tab-control"
:class="{ 'active': activeTab === 0 }"
>Tab 1</label>
<label
@click="activeTab = 1"
class="tab-control"
:class="{ 'active': activeTab === 1 }"
>Tab 2</label>
<label
@click="activeTab = 2"
class="tab-control"
:class="{ 'active': activeTab === 2 }"
>Tab 3</label>
</div>
<div class="tab-panel" :class="{ 'active': activeTab === 0 }" x-show.transition.in.opacity.duration.600="activeTab === 0">
<p>This is the example content of the first tab.</p>
</div>
<div class="tab-panel" :class="{ 'active': activeTab === 1 }" x-show.transition.in.opacity.duration.600="activeTab === 1">
<p>The second tab’s example content.</p>
</div>
<div class="tab-panel" :class="{ 'active': activeTab === 2 }" x-show.transition.in.opacity.duration.600="activeTab === 2">
<p>The content of the third and final tab in this set.</p>
</div>
</div>
Hope that this helps!
Best.
Bobby
1
Yes, thank you! That works!
1
No problem at all! Happy to hear that it works!
Is it possible to use the @click functionality to execute a specific javascript function if it is clicked? I tried using this with a function and it runs but it only runs when the page is initially loaded not every time it is clicked.
<div class="tab-wrapper" x-data="{ activeTab: 0 }">
<div class="flex">
<label
@click="activeTab = 0"
@click="javascript:testprint()"
class="tab-control"
:class="{ 'active': activeTab === 0 }"
>Tab 1</label>
<label
</div>
<script type="text/javascript">
function testprint(){
alert("Test alert on click")
}
</script>
Yep, you can just use plain JS with onclick="testprint()" rather than @click="javascript:testprint()", eg:
<div class="tab-wrapper" x-data="{ activeTab: 0 }">
<div class="flex">
<label
@click="activeTab = 0"
onclick="testprint()"
class="tab-control"
:class="{ 'active': activeTab === 0 }"
>Tab 1</label>
<label
</div>
<script type="text/javascript">
function testprint(){
alert("Test alert on click")
}
</script>
Hope that this helps!