How to enable and disable links successively?

Navigation
5

I have five links, and initially only the first link is enabled. When this first link is clicked, I want it to auto disable and enable the next, that is, the second link, and when the second is clicked, that auto disable and enable the next, and so on.

However, the links that have already been clicked want to remain disabled until you reach the last link. Here is a beginning of what I need: 

  window.onclick = function(){
        document.getElementById('link').onclick = function(){return false};
    }
    
    function desabilitar_link(){
        document.getElementById('link').innerHTML = "Link desabilitado";
        document.getElementById('link').style.color = "grey";                 
    }
<div>
    <ul>
        <li><a href="http://www.google.com.br/" target='_blank' id="link" onmouseup="desabilitar_link()"> Link habilitado </a></li>
        <li><a href="http://www.google.com.br/" target='_blank' id="link2" onmouseup="desabilitar_link()"> Link habilitado </a></li>
        <li><a href="http://www.google.com.br/" target='_blank' id="link3" onmouseup="desabilitar_link()"> Link habilitado </a></li>
        <li><a href="http://www.google.com.br/" target='_blank' id="link4" onmouseup="desabilitar_link()"> Link habilitado </a></li>
        <li><a href="http://www.google.com.br/" target='_blank' id="link5" onmouseup="desabilitar_link()"> Link habilitado </a></li>
    </ul>
<div>
    
asked by anonymous 20.01.2016 / 00:57

2 answers

4

I was able to find a solution via jQuery, see if it works for you in this fiddle: link

Please note that I had to put the id of the first link to "link1" so I did not have to do an unnecessary code check in the middle. 

//para tudo que o id comece com "link"
$('[id^=link]').click(function() {
  //verifica se tem a classe disabled
  if (!$(this).hasClass('disabled')) {
    //pegamos o id atual
    var id = $(this).attr('id');
    //damos split para pegar o numero
    var linknumber = id.split('link');
    //somamos o número + 1
    var nextLink = '#link'.concat(parseInt(linknumber[1]) + 1);

    //removemos a classe do próximo
    $(nextLink).removeClass('disabled');
    //adicionamos nele
    $(this).addClass('disabled');
  }
  //se tiver não faz nada
  else {
    return false;
  }
});
/* serve só para estilizar o link */

.disabled {
  text-decoration: none;
  color: gray;
  cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><ul><li><ahref="http://www.google.com.br/" target='_blank' class='' id="link1"> Link habilitado </a>
    </li>
    <li><a href="http://www.google.com.br/" target='_blank' class='disabled' id="link2"> Link habilitado </a>
    </li>
    <li><a href="http://www.google.com.br/" target='_blank' class='disabled' id="link3"> Link habilitado </a>
    </li>
    <li><a href="http://www.google.com.br/" target='_blank' class='disabled' id="link4"> Link habilitado </a>
    </li>
    <li><a href="http://www.google.com.br/" target='_blank' class='disabled' id="link5"> Link habilitado </a>
    </li>
  </ul>
  <div>
    
20.01.2016 / 01:27
1

Another way to resolve this is to disable the link through the pointer-events of CSS with value none . On this property, in MDN it is explained that:

  

The CSS property pointer-events allows authors to control under any circumstances (if any) a particular graphic element that can be the target ( event.target ) of the mouse event. When this property is not specified, the same characteristics of the visiblePainted value is applied to the SVG content.

And about the value none , the same source quotes:

  

The element is never the target ( event.target ) of mouse events; however, mouse events can target their descendants if those descendants have any other value set to pointer-events . Under these circumstances, mouse events will trigger listening events on their parent elements as appropriate on their path to / from the descendant during the catch / bubble event phases ( event.bubbles ).

The only point where use of this property can be considered a problem, depending on how you are developing the site, is that, according to Can I use it does not work on links rendered by Internet Explorer 11, except when they have display set to block or inline-block .

To resolve this, the snippet below defines all links with pointer-events: none , preventing any mouse events from being triggered. And with Javascript, assigns a active class to the active link, class which defines pointer-events: auto and makes the link "clickable." 

(function() {
  var links = document.querySelectorAll('nav a'),
      index = 0;

  /**
   * Remove a classe 'active' do link atual e move o índice para
   * o próximo elemento na lista de 'links'. Ao mover o índice, o
   * próximo elemento recebe a classe 'active'.
   *
   * Se o valor do índice chegar ao número total de links, ele será
   * zerado, voltando ao primeiro link da lista.
   */
  function handler(){
    links[index].classList.remove('active');

    index++;
    if (index === links.length) index = 0;

    links[index].classList.add('active');
  }
  
  
  for (var i = 0; i < links.length; i++)
    links[i].addEventListener('click', handler, false);

})();
nav a {
  pointer-events: none;
  display: inline-block; /* bug do IE11 */
  color: #ccc
}

nav a.active {
  pointer-events: auto;
  color: blue
}
<nav>
  <a class='active' href='#'>Link A</a>
  <a href='#'>Link B</a>
  <a href='#'>Link C</a>
  <a href='#'>Link D</a>
  <a href='#'>Link E</a>
  <a href='#'>Link F</a>
  <a href='#'>Link G</a>
</nav>
    
13.02.2016 / 02:24
How to send data from a Vector to another Activity? How to generate random values for a known distribution?