JavaScript: enlaces de alternar activos/desactivos

Question

¿Cómo alterno los enlaces HTML de ser activos / desactivos usando JavaScript?

Dentro de mi HTML, tengo 2 enlaces Hyper que llaman a una función JavaScript para ordenar una tabla:

<a href="javascript:sort('asc');">ASC</a> | <a href="javascript:sort('desc');">DESC</a>

Lo que me gustaría hacer es cuando alguien haga clic en el enlace "ASC", luego desactiva el hipervínculo "ASC" (ya no es un enlace) para que solo ahora ahora el enlace "Desc" esté activo.

Luego, si la persona presiona el enlace "Desc", luego deshabilita el enlace "Desc" y vuelve a habilitar el enlace "ASC".

Esencialmente, quiero alternar entre qué enlace está activo, ya sea: "ASC" o "Desc"

Supongo que puedes hacer esto con JavaScript pero no estoy seguro de cómo?

¿Algunas ideas?

Answer 1

No "elimina" estrictamente la etiqueta A, sino que elimina el "enlace" (eliminando el href) de la etiqueta.

Editar: versión ligeramente mejor (ahora probada):

<script type="text/javascript" >

  function mySort( sortorder) {

      // enable the other link
      otherOrder = (sortorder == 'asc') ? 'desc' : 'asc';
      document.getElementById(otherOrder).setAttribute("href", "#");
      document.getElementById(otherOrder).onclick = function() {mySort(this.id)};

      //disable this link
      document.getElementById(sortorder).removeAttribute("href");
      document.getElementById(sortorder).onclick = "";

      //perform the sort
      doSort(sortorder);
  }
</script>

<a id="asc" href="#" onclick="mySort(this.id)" >ASC</a> | <a id="desc" href="#" onclick="mySort(this.id)" >DESC</a>

Answer 2

¿Estás familiarizado con JQuery? Si es así, puede considerar los diversos complementos de clasificación de mesa, como Meseta. No tengo ningún uso en este momento, pero varias tiendas en mi organización lo han incorporado. Para puntos de bonificación, la documentación en ese enlace parece bastante integral.

jQuery también puede darle un control sólido sobre si el <a> está presente. Esperemos que alguien con más experiencia pueda pasar por algunos ejemplos de código que demuestren eso.

Answer 3

Podrías usar: en tu sección de script:

var asc = true;

y tu html

<a href="javascript:if (asc) { sort('asc'); asc=!asc; }; ">ASC</a> | <a href="javascript:if (!asc) { sort('desc'); asc=!asc; }; ">DESC</a>

(Aunque podría ser mejor convertirlos en funciones)

EDITAR

Según el comentario del autor, si desea "eliminar" completamente los enlaces, interrumpir la pantalla: Ninguno y pantalla: en línea en los elementos. p.ej

<a id="asc" href="if (asc) { sort('asc'); asc=!asc; this.style.display = 'none'; document.getElementById("desc").style.display = 'inline';}; ">ASC</a> | <a id="desc" href="if (!asc) { sort('desc'); asc=!asc; this.style.display = 'none'; document.getElementById("asc").style.display = 'inline';}; ">DESC</a>

Si desea reemplazarlos con tramos, use la misma técnica para mostrar/ocultar sus homólogos de SPAN

Answer 4

No los haga enlaces, use otro elemento, por ejemplo, un span.

<span onclick="sort('asc');">ASC</span> | <span onclick="sort('desc');">DESC</span>

Luego use JavaScript para establecer una clase que define un estilo visual en el elemento activo, puede alternar esto en cada uno span.

Su función de clasificación también puede determinar si la dirección suministrada es válida y simplemente no hacer nada.