JavaScript: toggle links active/deactive

Question

How do I toggle HTML links from being active / deactive using JavaScript?

Within my HTML, I have 2 hyper links that call a JavaScript function to sort a table:

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

What I would like to do is when someone clicks the "ASC" link, it then deactives the "ASC" hyperlink (no longer a link) so that only now the "DESC" link is active.

Then, if the person presses the "DESC" link, it then disables the "DESC" link and re-enables the "ASC" link.

Essentially, I want to toggle between which link is active, either: "ASC" or "DESC"

I assume you can do this with JavaScript but am not sure how?

Any ideas?

Answer 1

you could use: in your script section:

var asc = true;

and your html

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

(though it might be better to spin those off into functions)

EDIT

as per author's comment, if you want to completely "remove" the links, switch display:none and display:inline on the elements. e.g.

<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>

If you want to replace them with spans, then use the same technique to show/hide their span counterparts

Answer 2

Doesn't strictly "remove" the A tag, but removes the "linkness" (by removing the href) from the tag.

Edit: slightly better version (now tested):

<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 3

Are you familiar with jQuery? If so, you might consider the various table-sorting plugins out there, such as TableSorter. I don't have any use for it at the moment, but a number of shops in my organization have incorporated it. For bonus points, the documentation at that link seems pretty comprehensive.

jQuery can also give you solid control over whether the <a> is present. Hopefully someone with more experience can stop by w/ some code examples demonstrating that.

Answer 4

Dont make them links, use another element, eg a span

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

Then use javacript to set a class that defines a visual style on the active item, you can toggle this on each span.

Your sort function can also determine whether or not the supplied direction is valid and simply do nothing.