Блог

я создаю панель вкладок, чтобы показывать некоторые представления с помощью livewire, но я не знаю, как удалить и класс для неактивных вкладок и активной вкладки

 <div class="tabs tabs-boxed">
    <button wire:click="tabView(1)" class="tab">{{ __('Activities') }}</button> 
    <button wire:click="tabView(2)" class="tab">{{ __('Schedules') }}</button> 
    <button wire:click="tabView(3)" class="tab">{{ __('Contacts') }}</button>
</div>

 

в этом случае я хочу добавить bg-green-500 и rounded-full на активную вкладку, но затем удалить эти классы, если вкладка неактивна.

это компонент livewire:

 class Clients extends Component
{
    public $view = '';

    public function render()
    {
        return view('livewire.clients.clients');
    }

    public function tabView($tab_id){

        $this->reset();
        
        if($tab_id == 1){

          $this->view = 'activities';
        
        } elseif($tab_id == 2){

            $this->view = 'schedules';

        }else{

          $this->view = 'contacts';

        }
    }
}