JavaScript:切り替えリンクアクティブ/deactive

StackOverflow https://stackoverflow.com/questions/979424

  •  13-09-2019
  •  | 
  •  

質問

方法を切り替えHTMLリンクからアクティブ/deactive JavaScriptを使用?

マHTML、2つのハイパーリンクを呼び出すJavaScript機能をソートテーブル:

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

どのような人がクリックの"ASC"リンク、そのdeactivesは"ASC"ハイパーリンクなリンク）が今だけの"DESC"リンクが活躍しました。

そして、その人にプレスは、"DESC"のリンクでそれを無効にし、"DESC"リンクアンドの再可能にする"ASCる"をクリックしてください。

本来、思い切り替えるリンクが活躍し、次のいずれかに"ASC"または"DESC"

思ってこんな風にしてできるんだJavaScriptがいいかがですか？

そのアイデア?

役に立ちましたか？

解決

な厳密に"削除"のタグが削除します"linkness"(除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>

他のヒント

JQueryに精通していますか？もしそうなら、あなたはそこにあるさまざまなテーブルソーティングプラグインを考慮するかもしれません。 表. 。私は現時点ではそれを使用していませんが、私の組織内の多くのショップがそれを組み込んでいます。ボーナスポイントの場合、そのリンクのドキュメントはかなり包括的であるようです。

jQueryは、 <a> 存在します。うまくいけば、より多くの経験を持つ人が、それを示すいくつかのコードの例で停止できることを願っています。

使用できます：スクリプトセクション：

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>

（ただし、それらを機能にスピンオフする方が良いかもしれませんが）

編集

著者のコメントによると、リンクを完全に「削除」したい場合は、表示：なしと表示：要素のインライン。例えば

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

それらをスパンに置き換える場合は、同じ手法を使用してスパンを表示/非表示にします

それらをリンクにしないでください、例えば別の要素を使用します span.

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

次に、JavaScriptを使用して、アクティブなアイテムの視覚スタイルを定義するクラスを設定し、それぞれでこれを切り替えることができます span.

ソート関数は、供給された方向が有効かどうかを判断し、単に何もしません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top