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 atributo href
, que indica o destino do link.
FONTE OFICIAL: W3SCHOOLS
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>
.
FONTE OFICIAL: W3SCHOOLS
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.
// PERCORRE A ÁRVORE HTML, DENTRO DA LISTA ONDE SE ENCONTRAM OS BOTÕES
// RETORNA UM ARRAY DE BOTÕES ENCONTRADOS
$.fn.searchButtons = function () {
return $('.menu-services li button').each(() => { });
}
// PERCORRE A ÁRVORE HTML, DENTRO DO BODY ONDE SE ENCONTRAM OS CONTAINERS
// RETORNA UM ARRAY DE CONTAINERS ENCONTRADOS
$.fn.searchContainers = function () {
return $('div').each(() => { });
}
// EXIBE & ESCONDE TODOS OS CONTAINERS DOS ITEMS DE SERVIÇOS
$.fn.displayContainers = function (_buttonClickedEl) {
$.fn.searchContainers().each((i, el) => {
if (this.id === _buttonClickedEl.id) {
$(el).show();
}
});
}
$.fn.hideContainers = function (_buttonClickedEl) {
$.fn.searchContainers().each((i, el) => {
if (this.id !== _buttonClickedEl.id) {
$(el).hide();
}
});
}
// HABILITA & DESABILITA TODOS OS BOTÕES DA LISTA DE SERVIÇOS
$.fn.enableAllButtons = function () {
$.fn.searchButtons().each((i, el) => {
$(el).attr("disabled", false);
});
}
$.fn.disableAllButtons = function () {
$.fn.searchButtons().each((i, el) => {
$(el).attr("disabled", true);
});
}
// CRIA O EFEITO DE FADEOUT E FADEIN
$.fn.createEffectContainer = function (_buttonClickedID, _fadeOutTimer, _fadeInTimer, _delayFadeInTimer) {
var containerItemService = `#items-${_buttonClickedID}`;
$(containerItemService).fadeOut(_fadeOutTimer, function () {
$(this).delay(_delayFadeInTimer).fadeIn(_fadeInTimer, function () {
$.fn.enableAllButtons();
});
});
}
// EVENTO DE ONCLICK NO DETERMINADO BOTÃO DE SERVIÇO DA LISTA
$('.menu-services li button').click(function () {
$.fn.disableAllButtons();
$.fn.displayContainers(this);
$.fn.hideContainers(this);
$.fn.createEffectContainer(this.id, 400, 400, 700);
});
<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>