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

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 2

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

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

Don't make them links, use another element, for example a span .

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

Then use JavaScript 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.