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上切換該樣式。

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