Antes de mais nada eu analisei o seu código e verifiquei que você está utilizando a âncora de hyperlink <a>
como se fosse um botão, por boas práticas não faça isto! Ao invés do hyperlink <a>
utilize a tag <button>
!
Definição de uso da Tag <a>
A tag
<a>
define um hiperlink, que é usado para vincular de uma página para outra. O atributo mais importante do elemento<a>
é o atributohref
, que indica o destino do link.
Definição de uso da Tag
A tag
<button>
define um botão clicável. Dentro de um elemento<button>
você pode colocar conteúdo, como texto ou imagens. Esta é a diferença entre este elemento e os botões criados com o elemento<input>
.
DICA: Sempre especifique o atributo type para um elemento
<button>
. Navegadores diferentes usam tipos padrão diferentes para o elemento<button>
.
Agora vamos para as opções que temos de acordo com o cenário, como você não nos deus nenhuma regra de negócios e não detalhou muito o seu problema eu tirei a seguinte conclusão:
Você terá diversos botões (serviços) e diversos containers que são as divs (lista de items dos determinados serviços). Os mesmos estarão estáticos no HTML, ou seja, eu não poderia criar um container para todos os items de serviços, e inserir dinamicamente o conteúdo daquele item neste container.
$('.menu-services li button').click(function() {
// PEGA O ID DO BOTÃO CLICADO
var btnServiceItemID = this.id;
// DESABILITA O BOTÃO CLICADO
$(this).attr("disabled", true);
// BUSCA TODAS AS DIVS NO HTML
$('div').each(function(){
var containerServiceItemID = "items-" + btnServiceItemID;
// VERIFICA SE OS ID'S DAS OUTRAS DIV'S SÃO DIFERENTES DA DIV HABILITADA
// CASO SEJA DIFERENTE, IRÁ DAR DISPLAY:BLOCK NAS DIV'S NÃO HABILITADAS
if (this.id !== containerServiceItemID) {
$(this).hide();
}
});
// EFEITO DE FADEOUT E FADEIN NA DIV-CONTAINER DO DETERMINADO ITEM DO SERVIÇO
$('#items-' + btnServiceItemID).fadeOut(400, function(){
$(this).delay(700).fadeIn(400, function() {
// DESABILITA O BOTÃO CLICADO
$('#' + btnServiceItemID).attr("disabled", false);
});
});
});
<ul class="menu-services">
<li>
<button type="button" id="service-one">Serviço 1</button>
</li>
<li>
<button type="button" id="service-two">Serviço 2</button>
</li>
</ul>
<div id="items-service-one" class="row" style="display: block;">
<h1>Serviço 1</h1>
</div>
<div id="items-service-two" class="row" style="display: none;">
<h1>Serviço 2</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>