JavaScriptを使用せずにリンクのように見えるようにスタイルを設定するにはどうすればよいですか？

Question

<a>の代わりに<span>を使用する必要があります。なぜなら、私は主にajaxを使用しているため、リンクの代わりに私のスパムの属性としてonclick ajaxイベントがあるからです。

その結果、スパンを手動でリンクのようにスタイルする必要がありました。私はホバリングを使用し、背景とテキストの色を変更するために擬似クラスを訪問しましたが、マウスのデフォルトをマウスポインタの指先に変更するには、javascriptを使用する必要がありますか？または、私はCSSを使ってそれを行うことができますか？

また、私はちょうどタグを<span>の代わりに使用することができませんでしたが、hrefの代わりにonclickを含めることができましたか？それはまったく同じではありませんか？

Answer 1

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

Answer 2

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

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

http://jsfiddle.net/kkepg/

Answer 3

あなたがアンカーを使用することができます。しかし、javascriptの中ではevent.preventDefault()を使う必要があります。しかし、CSSの方が小さくて簡単です。あなたのスパンを保ち、これを使用します。またあなたは（あなたが最初に使用されていないものだけ任意のスタイルを使用することができます）推移する際の要素のスタイルを設定する:hover疑似クラスを使用することができます

span:hover{ 
    cursor:pointer; 
} 

Answer 4

span { 
    cursor:pointer; 
    color:blue; 
    text-decoration:underline; 
} 

を。 Ex。

span:hover { 
    text-decoration:none; 
    text-shadow: 1px 1px 1px #555; 
} 

Example

Answer 5

あなたはcursor: pointer CSSルールを指定することにより、ポインタにカーソルを変更することができます。

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

Answer 6

オプション1

ちょうどanchorリンクを使用します。

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

オプション2

あなたが使用スパンをしたいだろう、なぜ私は知らないが、あなたが行う場合は、次のことを行うことができますスタイルを使用して、アンカーリンクと似たようにします。

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*/ 
} 

Answer 7

あなたのウェブサイトが公開されていると、あなたのサイトをクロールし、検索エンジンを頼りにしている場合はスパイダーがあなたのページをクロール中につかむことは何もないので、あなたがhrefせずにリンクを残すことによって多くを失うことに注意してください。あなたがpreventDefault()を使用してjQueryを使ってリンクを無効にすることができるよりも

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

- あなたは完全に分離：ユーザーがまだページ間を移動することができ、あなたのjavascriptが故障した場合 -

あなたは完全なリンクを使用する必要がありますベースのHTMLとjavascriptの部分は、あなたのサイトがまだjavascriptを使わずに使えることを意味します。

あなたはスパンホバー、何を気にする必要はありませ行うよりも - しかし、ちょうどそれのために

span:hover { 
cursor:pointer; 
} 

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

Answer 8

あなたはonClickイベントを使用できますが、正しく覚えていれば、あなたのページが飛び跳ねるのを防ぐためにfalseを返す必要があります。何かのように：myfunctionはfalseを返すことを提供<a href="#" onClick="return myfunction();">：

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

か。

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

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

でも、あなたはまだ場合onClickプロパティを使用します。 href="#"をhref="javascript:void(0)" ...>に置き換えることは、まだ良い考えです。

event.preventDefault()とstopPropagation()を使用して他の人が言及しています。私はこれらのうちの1つを使用したことを覚えていませんが、HTMLリンクでJavaScriptをコーディングしてから何年も前になっていることを認めなければなりません。これらの2つの機能の使用を確実に調査する必要があります。

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