0

如何使用 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 做到这一点，但不知道怎么做？

有任何想法吗？

4

4 回答 4

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>
于 2009-06-11T05:37:53.440 回答
0

你可以使用：在你的脚本部分：

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>

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

于 2009-06-11T05:26:21.157 回答
0

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

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

于 2009-06-11T05:40:38.693 回答
0

不要让它们链接，使用另一个元素，例如 a span。

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

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

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

于 2009-06-11T13:40:32.033 回答