how to change tab colour on click in vue js-CodePudding

I have this tab that hide and show component, I'm trying to change the text color to red when a tab is active and has been clicked

this is my component

<div @click="visibleComponent='transactions'": >
    Wallet
</div>
<div @click="visibleComponent='bankAccount'":>
    Bank Account
</div>

CodePudding user response：

To change the text color of a tab when it is active and clicked, you can use a combination of the :class directive and a computed property.

Here's an example of how you can do this:

<template>
  <div>
    <div
      @click="visibleComponent = 'transactions'"
      :
      
    >
      Wallet Transactions
    </div>
    <div
      @click="visibleComponent = 'bankAccount'"
      :
      
    >
      Bank Account
    </div>
  </div>
</template>

<style>
.active {
  color: red;
}
</style>

<script>
export default {
  data() {
    return {
      visibleComponent: 'transactions'
    }
  }
}
</script>

In this example, the active class is added to the div element when the visibleComponent data property is equal to the tab that is being clicked. The active class is defined in the stylesheet and changes the text color to red.

You can customize this approach to fit your specific needs. For example, you might want to use a different class name or change the color based on a different condition.

CodePudding user response：

Use condition in class binding

If visibleComponent === 'transactions' return true this tab get bg-blue class. And if you want set it class to other tab when it is active use : on it