0

JavaScript を使用して HTML リンクのアクティブ/非アクティブを切り替えるにはどうすればよいですか?

HTML 内に、JavaScript 関数を呼び出してテーブルを並べ替える 2 つのハイパー リンクがあります。

<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

それらをリンクにしないで、 a などの別の要素を使用してくださいspan。

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

次に、JavaScript を使用して、アクティブなアイテムのビジュアル スタイルを定義するクラスを設定します。これを各 で切り替えることができますspan。

sort 関数は、指定された方向が有効であるかどうかを判断し、単に何もしないこともできます。

于 2009-06-11T13:40:32.033 に答える
0

jQueryに精通していますか？その場合は、TableSorterなど、さまざまなテーブル ソート プラグインを検討することをお勧めします。現時点では使用していませんが、私の組織の多くのショップがそれを取り入れています. おまけとして、そのリンクのドキュメントはかなり包括的です。

jQuery を使用すると、 が存在するかどうかを確実に制御することもできます<a>。うまくいけば、より多くの経験を持つ誰かが、それを示すいくつかのコード例で立ち寄ることができます.

于 2009-06-11T05:40:38.693 に答える