0

基本的に、私はこれの反対をしたい:アンカーを非表示にせずにアンカーテキストを非表示にする方法

クライアント側で決定された特定の条件のセットの下で、リンクを非アクティブ化できるが、テキストを表示できるリンクを自分のページに配置できるようにしたいと考えています。2 つの個別の要素 (アンカーとテキストの両方を含む要素とテキストのみを含む要素) を持たずにこれを行う方法はありますか?

編集：申し訳ありませんが、明確にする必要があります。非アクティブ化されたときに、リンクのスタイルをリンクのようにしないでください。

4

6 に答える 6

2

<a>をジェネリックに置き換えて、<span>もう一度元に戻します。

置き換える簡単な戦略は次のとおりです。

  1. ノードを見つけます。
  2. その前に置き換えられたノードを追加します
  3. 最初のノードを削除します

--

var node = document.getElementById("example");
var new_node = document.createElement("a"); // or "span"
new_node.innerText = text;
node.parentNode.insertBefore(new_node, node);
node.parentNode.removeChild(node);

このコードは完全ではありませんが、アイデアを提供するだけです。

于 2013-01-16T21:38:57.060 に答える
1

条件が満たされた場合、href 属性を削除できます。
この例を確認してください。
HTML

<a href="http://google.com"> Link to google</a>
<p> Hover over me to remove the link from the anchor</p>

Javascript(jquery使用)

$("p").on("mouseover", function(){
   $("a").removeAttr("href"); 
});

段落タグにカーソルを合わせると、href が削除されますが、その上にカーソルを合わせない場合は、google.com に移動できます。p タグにカーソルを合わせることが条件の例です。
例Fiddle

これにより、href がアンカー タグから完全に削除されます。別の条件が満たされた場合は、元に戻す必要があります。

于 2013-01-16T21:45:07.337 に答える
0

簡単に言えば、いいえです。非表示または非表示の要素は、その子も非表示にします。必要に応じてアンカー タグの属性を変更する方が簡単な場合があります。

ホットリンク:

<a href="#some-url-here" class="">Text here</a>

非ホットリンク

<a class="no-link" data-url="#some-url-here">Text here</a>

JavaScript を使用してhref属性を削除し、その値を保存して、スタイリングをオーバーライドするために使用できるクラスを追加できます。

于 2013-01-16T21:39:38.233 に答える
0

同様の効果を達成する方法が多すぎるため、あなたが尋ねたことに対する直接的な「正しい」答えはありません。この回答は、条件に基づいてアンカーを無効にして再度有効にする必要がある場合の最も簡単な方法の 1 つであると私が判断したものです。

アンカー機能を無効にするなどのクリック ハンドラーを追加して.on('click.disabledLink', false)(デフォルトを防止し、伝播を停止します)、ページ内の通常のテキストのように見せるクラスでスタイルを設定できます。

再度有効にするにはoff、ハンドラーを使用して、追加されたクラスを削除するだけです。

//disable link
$('a').on('click.disabledLink', false).addClass('disabledLink');
//re-enable link
$('a').off('.disabledLink').removeClass('disabledLink');

フィドル

于 2013-01-16T21:47:48.767 に答える
0

Firefox および WebKit ブラウザーでは、 を使用pointer-events: none;して、要素をポインターに対して "透明" にすることができます (視覚的な意味ではなく、機能的な意味で!)。実際にクリックしているのは、下の要素です。デモについては、 http://jsfiddle.net/Hqk49/を参照してください。
CSS が有効になっている場合にのみ機能することに注意してください (およびクラスを切り替えてリンクの通常の動作を復元するための JS)。IE9 およびおそらく IE10 ではサポートされていません。Opera ではサポートされていません: https://developer.mozilla.org/fr/docs/CSS/pointer-events

于 2013-01-16T21:50:15.857 に答える