Skip to main content
Commonmark migration
Fonte Link

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

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

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

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

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

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

Formatação Aperfeiçoada e Aperfeiçoamento do Algorítimo!
Fonte Link
user148754
user148754
        // 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').clickeach(function() => { });
        }

        // PEGAPERCORRE OA IDÁRVORE HTML, DENTRO DO BOTÃOBODY CLICADOONDE SE ENCONTRAM OS CONTAINERS
    var btnServiceItemID = this.id;
 // RETORNA UM ARRAY DE CONTAINERS ENCONTRADOS
    // DESABILITA O BOTÃO CLICADO$.fn.searchContainers = function () {
            return $(this'div').attreach("disabled",() true=> { });
        }

        // BUSCAEXIBE TODAS& ASESCONDE DIVSTODOS NOOS HTMLCONTAINERS DOS ITEMS DE SERVIÇOS
        $.fn.displayContainers = function (_buttonClickedEl) {
            $.fn.searchContainers('div').each(function(i, el) => {
       var containerServiceItemID = "items-" + btnServiceItemID;    if (this.id === _buttonClickedEl.id) {
                    $(el).show();
       // 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$.fn.hideContainers HABILITADAS= function (_buttonClickedEl) {
            $.fn.searchContainers().each((i, el) => {
                if (this.id !== containerServiceItemID_buttonClickedEl.id) {
                    $(thisel).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 
 NA DIV-CONTAINER DO DETERMINADO ITEM DO SERVIÇO
 $.fn.createEffectContainer = function $('#items_buttonClickedID, _fadeOutTimer, _fadeInTimer, _delayFadeInTimer) {
            var containerItemService = `#items-'${_buttonClickedID}`;

 + btnServiceItemID          $(containerItemService).fadeOut(400_fadeOutTimer, function () { 
    
             $(this).delay(700_delayFadeInTimer).fadeIn(400_fadeInTimer, function () {
                    $.fn.enableAllButtons();
                });
            });
        }

        // DESABILITAEVENTO ODE BOTÃOONCLICK CLICADO
NO DETERMINADO BOTÃO DE SERVIÇO DA LISTA
        $('#''.menu-services +li btnServiceItemIDbutton').attrclick("disabled",function false() {
            $.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>
$('.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>
        // 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>
Formatação Aperfeiçoada
Fonte Link
user148754
user148754
$('.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);
        });
     });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<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>
$('.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);
    });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<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>
$('.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>
Formatação Aperfeiçoada
Fonte Link
user148754
user148754
Carregando
Fonte Link
user148754
user148754
Carregando