JavaScript：切换链接有效/无效

Question

如何使用JavaScript将HTML链接从活动状态切换为非活动状态？

在我的HTML中，我有2个超链接，它们调用JavaScript函数对表进行排序：

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

我想做的是，当有人单击“ ASC”链接时，它会停用“ ASC”超链接（不再是链接），以便仅现在激活“ DESC”链接。

然后，如果该人按下“ DESC”链接，则它将禁用“ DESC”链接并重新启用“ ASC”链接。

本质上，我想在哪个链接处于活动状态之间进行切换：“ ASC”或“ DESC”

我认为您可以使用JavaScript来做到这一点，但不确定如何？

有任何想法吗？

Answer 1

严格来说，并不是严格地“删除” A标签，而是从标签中删除“链接”（通过删除href）。

编辑：稍好一点的版本（现已测试）：

<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

您可以在脚本部分使用：

var asc = true;

和你的HTML

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

（尽管最好将它们分解为功能）

编辑

根据作者的评论，如果要完全“删除”链接，请在元素上切换display：none和display：inline。 例如

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

如果要用跨距替换它们，请使用相同的技术来显示/隐藏其跨距对应项

Answer 3

您熟悉jQuery吗？ 如果是这样，您可以考虑使用各种表排序插件，例如TableSorter 。 我目前没有任何用途，但是我组织中的许多商店都已将其合并。 对于奖励积分，该链接上的文档似乎非常全面。

jQuery还可以使您对<a>是否存在进行可靠控制。 希望有更多经验的人可以停下一些示例代码来证明这一点。

Answer 4

不要使它们链接，而要使用其他元素，例如span 。

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

然后使用JavaScript设置一个在活动项目上定义视觉样式的类，您可以在每个span上切换该样式。

您的排序功能还可以确定所提供的方向是否有效，并且什么也不做。