2012-01-26 11 views
4

主にiPadで表示されているHTMLページを書きました。基本的には、各質問にホバー効果を持つFAQリストです。 ipadでホバー効果を開始するには、このようなダミーのリンクを置く必要がありました。ここで リンクをクリックすると予期しないページがスクロールする

<a href="#">The question?</a> 

は、すべてのブラウザのために有効であるという問題である:リストには、スクロールダウンする必要があると、ページの下部にあるリンクをクリックしたとき、それが一番上にジャンプして戻るように長い場合ホバー効果を開始します。私は実証目的のためにバイオリンを作った:

http://jsfiddle.net/SWXHR/1/

スクロールダウンし、最後のリンクをクリックすると、ページが一番上にジャンプします。

質問:ダミーリンクを使用している場合、ページが上部にジャンプしないようにするにはどうすればよいですか?

+2

の場合それはハイパーリンクではありません、なぜあなたはhrefプロパティを満たしていますか?あなたはおそらく何かを悪用しているでしょう。 http://developers.whatwg.org/text-level-semantics.html#the-a-element – ANeves

+0

それを指摘してくれてありがとう。私はそれを悪用していることを知っていますが、私はホバー疑似クラスのタッチフレンドリーな交換を知らない。誰かが正しい方向に私を向けることができますか? – aydio

+0

:ホバーは何にでも適用できます。それがあなたの唯一の問題であれば、スパンと置き換えることができます。答えを投稿します。 – ANeves

答えて

13

を停止しますアンカータグに

onclick="return false;" 

を追加します。

<a href="#" onClick="return false;">The question?</a> 

それとも、jQueryのを通してそれをやっている場合:

$('a[href="#"]').click(function(event){ 

    event.preventDefault(); 

}); 
+0

他のリンクを破壊しないでください: '$( 'a [href ="# "]')。click(...);' - http://www.w3のように '#'へのハイパーリンクのみをターゲットにする必要があります.org/TR/css3-selectors /#セレクタ – ANeves

+0

良い点。必要に応じてブランケットコードを追加しました。私は私の答えを編集しました。 –

+0

gr8うまく働いています.... + 1 – Youddh

2

これはあなたのリンクにこれを追加それを

3

<a href="javascript:;">The question</a>何もしない(空のjavascriptコマンド)スクロールはそのまま残ります;

1

ホバー効果が必要な場合は、aをまったく使用する必要はありません。

あなたはスパンを使用して、ターゲットにCSSを置き換えることができます代わりに、アンカーのまたがり:http://jsfiddle.net/SWXHR/6/

あなたはカーソルがアンカーのカーソルのようになりたい場合は、CSSでそれを行うことができます - cursor: pointer;

+0

これはiPad上でホバー効果を開始しません - 私はアンカーを設定する必要があります。 – aydio

+0

1.「iPad上のホバー効果」の意味を説明できますか? 2. CSSセレクタはありますか?たぶん ':focus'か':active'ですか? 3. iPadにはポインタデバイスがないので、どのように「ホバー」するのですか? – ANeves

関連する問題