javascript - ページの先頭にジャンプせずに「#」リンクを使用した Javascript ギャラリー onmouseUp

Question

これはおそらく「昔ながらの」方法だと思いますが、1 つの例外を除いて、ようやくギャラリーを機能させることができました。ギャラリーがページの下にある場合、サムネイルの「#」リンクによってページが一番上にジャンプします。このギャラリーを作成するより良い方法はありますか?

前もって感謝します！

score 1 · Accepted Answer

戻り値falseを追加すると、通常、＃リンクをクリックしたときにページが一番上にジャンプするのを防ぎます。

<a href="#" onclick="return false;"><img src="..." /></a>

あなたの問題については、私はShawnのソリューションを使用し、CSSを使用します。したがって、画像の周りのすべてのリンクを削除し、これをドキュメントに追加します。

<style> img{cursor:pointer;} #Display{cursor:auto;} </style>

2番目のエントリ（#Display）は、メイン画像がポインタカーソルを取得しないようにするためのものです。各画像にクラスをドロップしてから、そのクラスの画像にカーソルを割り当てる方がよいでしょう。それは次のようになります：

<style> img.myImage{cursor:pointer;} </style>    
<img class="myImage" src="...">

score 0 · Accepted Answer

ホバー時に手のアイコンを取得するためにアンカータグを使用していると思います。CSS を使用して同じ効果を得ることができます。

style="cursor: hand;"

これにより、同じ効果が得られ、アンカータグの問題が回避されます。

score 0 · Accepted Answer

そのためにアンカータグを使用しないことを強くお勧めします。JavaScript イベントは、次のように任意の DOM 要素に追加できます。

<li class="click-to-expand">
  <img src="..." />
</li>

また、一部のユーザーがすでに回答したように、CSS ポインタープロパティを使用して、クリック可能なインターフェイスアイテムをホバーするときにユーザーが可能な操作を示すことができます。

.click-to-expand{
  cursor:pointer;
}

必要な場合に備えて、コンテンツにアクセスするための有効な URL を指定して、アクセスできるようにしておいてください (JavaScript フォールバックなし)。

3 に答える 3