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并在元素上显示：inline。 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>

如果你想用跨度替换它们，那么使用相同的技术来显示/隐藏它们的跨度对应物

Answer 3

你熟悉jQuery吗？如果是这样，您可以考虑各种表格排序插件，例如TableSorter。我目前没有任何用处，但是我组织中的一些商店已将其纳入其中。对于奖励积分，该链接的文档看起来非常全面。

jQuery还可以让您可以控制<a>是否存在。希望有更多经验的人可以通过一些代码示例来证明这一点。

Answer 4

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

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

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

您的排序功能还可以确定提供的方向是否有效，并且不执行任何操作。

JavaScript：切换链接有效/无效

4 个答案: