JavaScript: liens à bascule actif / Deactive

Question

Comment puis-je basculer les liens HTML d'être actif / JavaScript en utilisant Deactive?

Dans mon HTML, j'ai 2 liens hyper qui appellent une fonction JavaScript pour trier une table:

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

Ce que je voudrais faire est quand quelqu'un clique sur le lien « ASC », il deactives alors le lien « ASC » (plus un lien) de sorte que seul maintenant le lien « DESC » est actif.

Ensuite, si la personne appuie sur le lien « DESC », il désactive alors le lien « DESC » et rétablit le lien « ASC ».

Pour l'essentiel, je veux basculer entre lesquels le lien est actif, que ce soit: « ASC » ou « DESC »

Je suppose que vous pouvez le faire avec JavaScript mais ne sais pas comment?

Toutes les idées?

Answer 1

Ne pas strictement « supprimer » la Une étiquette, mais supprime la « linkness » (en supprimant le href) de la balise.

Edit: version légèrement mieux (maintenant testé):

<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

Êtes-vous familier avec jQuery? Si oui, vous pourriez envisager les différents plugins-table de tri là-bas, comme tablesorter . Je n'ai pas utilisé pour elle en ce moment, mais ils ont incorporé un certain nombre de magasins dans mon organisation, il. Pour les points de bonus, la documentation à ce lien semble assez complet.

jQuery peut également vous donner un contrôle solide pour savoir si le <a> est présent. Espérons que quelqu'un avec plus d'expérience peut arrêter w / quelques exemples de code montrant que.

Answer 3

vous pouvez utiliser: dans votre section de script:

var asc = true;

et votre code html

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

(bien qu'il pourrait être préférable de faire tourner les fonctions hors dans)

EDIT

selon le commentaire de l'auteur, si vous voulez complètement « supprimer » les liens, affichage du commutateur: aucun et display: inline sur les éléments. par exemple.

<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 vous voulez les remplacer par des portées, puis utiliser la même technique pour afficher / masquer leurs homologues span

Answer 4

Ne pas les faire des liens, utilisez un autre élément, par exemple un span.

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

Ensuite, utilisez JavaScript pour définir une classe qui définit un style visuel sur l'élément actif, vous pouvez activer ou désactiver cette opération sur chaque span.

Votre fonction de tri peut également déterminer si oui ou non la direction fournie est valide et ne simplement rien.