先在你的程式中貼上這串吧!

<div x-data="{ tab: 'foo' }">
    <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
    <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>

    <div x-show="tab === 'foo'">Tab Foo</div>
    <div x-show="tab === 'bar'">Tab Bar</div>
</div>

非常簡易的tab切換就完成了!
那我們就一行一行來看吧~
首先 x-data="{ tab: 'foo' }" 就跟昨天的原理是一樣的，
將tab這東西預設為'foo'。

再來底下兩個button裡面的東西我們一項一項看吧
:class="{ 'active': tab === 'foo' }"
意思是當tab為'foo'時，這個button會掛上active的class。
@click="tab = 'foo'"
當點擊這個按鈕時tab會等於'foo'

最後底下的 x-show="tab === 'foo'" 如昨天所說的一樣喽，
當tab嚴格相等於'foo'時，就會show出來了。

那麼如果要再切換tab時加上動畫當然也是沒問題的喔!
有興趣的可以參考昨天的x-show.transition，
同樣的把想加的加上去客製動畫tab就完成了。