59

私のウェブサイトでは、ほとんど ajax を使用しているため、リンクの代わりに onclick ajax イベントをスパンの属性として使用する必要があり<span>ます<a>。

その結果、リンクのように見えるように手動でスパンをスタイルする必要がありました。ホバーを使用して疑似クラスにアクセスし、背景とテキストの色を変更しましたが、ホバー時にマウスのデフォルトを人差し指に変更するには、javascript を使用する必要がありますか? または、cssを使用してそれを行うことはできますか?

また、私はちょうど実現しました:<a>とにかく代わりにタグを使用することはできませんでし<span>たが、href の代わりに onclick? を含めますか? 同じように機能するはずですよね？

4

9 に答える 9

124 

span {
     cursor:pointer;
     color:blue;
     text-decoration:underline;
}
<a href="#">Hyperlink</a><br />
<span>Span</span>

さらに、:hover疑似クラスを使用して、ホバーしたときに要素のスタイルを設定できます (最初に使用されたスタイルだけでなく、任意のスタイルを使用できます)。例えば：

span:hover {
     text-decoration:none;
     text-shadow: 1px 1px 1px #555;
}
于 2012-12-28T13:16:27.783 に答える
15

あなたのウェブサイトが公開されていて、あなたがあなたのサイトをクロールするために検索エンジンを頼りにしているなら、あなたはhrefあなたのページをクロールしている間スパイダーがつかむものが何もないのでリンクを省くことによって多くを失うことに注意してください。

完全なリンクを使用する必要があります-JavaScriptが壊れた場合でも、ユーザーはページ間を移動できます。

<a href="http://www.example.com">Link</a>

これは、 preventDefault（）を使用してjqueryでリンクを無効にできるよりも、ベースhtmlとjavascript部分を完全に分離したため、javascriptをオンにしなくてもサイトを使用できます。

スパンホバーなどを気にする必要はありませんが、それだけのために

span:hover {
cursor:pointer;
}

ホバーしたスパンでホバーハンドカーソルを有効にします。

于 2012-12-28T14:06:09.157 に答える
7

cssに追加するだけcursor:pointer;です。span

于 2012-12-28T13:15:57.913 に答える
7

オプション1

anchor次のようにリンクを使用するだけです。

<a href="#" onclick="someFunction();"> Link </a>

オプション2

span を使用する理由はわかりませんが、使用する場合は、次のスタイルを実行して、アンカー リンクのように見せることができます。

span {
    color: #000000; /* Change this with links color*/
    cursor: pointer;
    text-decoration: underline;
}

span:hover {
    color: #444444; /* Change the value to with anchors hover color*/
}
于 2012-12-28T13:19:47.373 に答える
4

CSS を使用して、カーソルをポインターとして表示します。

<span style="cursor: pointer;">Pseudolink</span>

http://jsfiddle.net/kkepg/

于 2012-12-28T13:16:10.070 に答える
2

アンカーを使用できます。ただし、JavaScript 内では使用する必要がevent.preventDefault()ありますが、より小さくて簡単な CSS メソッドがあります。あなたのスパンを保ち、これを使用してください：

span:hover{
    cursor:pointer;
}
于 2012-12-28T13:16:25.307 に答える
1

cursor: pointerCSSルールを指定することで、カーソルをポインタに変更できます。

<a>の代わりにタグを使用することもでき<span>ます。実際には、スクリーン リーダーやその他の同様のデバイスでより適切に動作します。ハンドラーでおよびJavaScript 関数hrefを使用する場合、属性を省略する必要はありません。このようにして、非 JS 対応ブラウザーとの下位互換性をある程度保持することができます。preventDefault()stopPropagation()onClick

于 2012-12-28T13:19:33.797 に答える
-2

onClick イベントを使用できますが、私の記憶が正しければ、ページがジャンプしないように false を返す必要があります。何かのようなもの：

<a href="#" onClick="myfunction();return false;">

または: false を返す<a href="#" onClick="return myfunction();">場合。myfunction

href から javascript を直接呼び出すこともできますが、有効なリンクとして結果をたどろうとするブラウザをブロックするには、結果を void にキャストする必要があります。

<a href="javascript:void(myFunction())">

onClick プロパティを引き続き使用したい場合でも。を に置き換えることをお勧めhref="#"しhref="javascript:void(0)" ...>ます。

他の人がevent.preventDefault()との使用について言及していstopPropagation()ます。これらのいずれかを使用したことは覚えていませんが、HTML リンクで JavaScript をコーディングしたのは何年も前のことだと認めざるを得ません。したがって、これら 2 つの関数の使用法を確実に調査する必要があります。

編集: a を使用するのhref="javascript:void(0)"は悪い考えかもしれません。http://drupal.org/node/1193068を参照してください。

于 2012-12-28T14:29:02.660 に答える