1

Cenário teste

Tenho um menu, com sub-itens, em que cada sub-item é um link:

<ul id="MenuTabs" class="nav nav-tabs justify-content-center">
    <li class="nav-item">
        <a id="TabInfo" class="nav-link text-danger active"href="#" onclick="info()"><i class="fas fa-info"></i></a>
    </li>
    <li class="nav-item">
        <a id="Tab1" class="nav-link dropdown-toggle text-dark" data-toggle="dropdown" href="#">Tab 1</a>
        <div class="dropdown-menu">
            <a id="tab1opc1" class="dropdown-item" href="#" onclick="t1o1()">Opção 1 Tab 1</a>
            <a id="tab1opc2" class="dropdown-item" href="#" onclick="t1o2()">Opção 2 Tab 1</a>
        </div>
    </li>
    <li class="nav-item">
        <a id="Tab2" class="nav-link dropdown-toggle text-dark" data-toggle="dropdown" href="#">Tab 2</a>
        <div class="dropdown-menu">
            <a id="tab2opc1" class="dropdown-item" href="#" onclick="t2o1()">Opção 1 Tab 2</a>
            <a id="tab2opc2" class="dropdown-item" href="#" onclick="t2o2()">Opção 2 Tab 2</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a id="Tab3" class="nav-link dropdown-toggle text-dark" data-toggle="dropdown" href="#" >Tab 3</a>
        <div class="dropdown-menu">
            <a id="tab3opc1" class="dropdown-item" href="#" onclick="t3o1()">Opção 1 Tab 3</a>
            <a id="tab3opc2" class="dropdown-item" href="#" onclick="t3o2()">Opção 2 Tab 3</a>
        </div>
    </li>
</ul>

Funcionamento

Cada sub-item, é um link com uma ação JQuery, e essa ação ao ser disparada deve adicionar a classe active na aba raiz (até aqui sem problema).

O problema, é saber de qual a "aba anterior" para remover a classe active.


Dúvidas

  • Gostaria de saber, é se existe uma forma no JQuery que remova de forma recursiva, qualquer elemento que tenha a classe active, nesse caso.

Algo do tipo $('#MenuTabs').removeClass('active'), mas que pegue todos elementos dentro do elemento id="MenuTabs".

2
  • 1
    Não seria apenas $('#MenuTabs .active').removeClass('active')?
    – Woss
    Commented 28/01/2019 às 11:00
  • @AndersonCarlosWoss Exatamente isso professor! Muito obrigado!
    – rbz
    Commented 28/01/2019 às 11:08

1 Resposta 1

3

Basta você fazer:

$('.active').removeClass('active');

Isso removerá a classe active de qualquer elemento que possuí-la.

Caso queira limitar a árvore de busca para evitar conflitos com o restante da página, você pode utilizar do seletor CSS que define o elemento root: root .active, assim buscará apenas elementos com a classe .active dentro de root. Considerando o elemento pai como #MenuTabs, bastaria fazer:

$('#MenuTabs .active').removeClass('active')

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .