CODEWITHSUNDEEP
vuejs2element-ui
dede.brahma
dede.brahma

Reputation: 329

How to set active class with nav-tabs

I'm using Bootstrap 3 nav-tabs component as my primary navigation bar, but I can't figure out how to set the active menu based on a class binding.

Inside of any button for dropdown navigation to show/hide next menu bar, but the active class doesn't run.

Can you help me?

Expected: menu can show tab is active, when click button dropdown active tab is active click button

Here what I've been trying:

<li :class="{ active : active_el == 1 }" data-wow-delay="0.14s">
  <a @click="activateProfile" data-toggle="tab" aria-expanded="false">profile</a>
</li>
...
activateProfile() {
  this.initTabsState()
  this.isProfile = true
  this.isTabMore = false
}

And here's my fiddle.

https://jsfiddle.net/dede402/x62p6xwm/

Upvotes: 0

Views: 672

Answers (1)

imixtron
imixtron

Reputation: 303

The problem in in your activateProfile() function you have to set active_el = 1 for profile and vice versa. Everything is working fine. you need to modify your activate...() functions as such:

activateProfile() {
  // you need to instantiate the `active_el` as well for it to work.
  this.active_el = 1 
  this.initTabsState()
  this.isProfile = true
  this.isTabMore = false
}

heres a fiddle of the working example.

Upvotes: 1

Related Questions