2011-12-15 19 views
3

jQueryにはCSS3に似た疑似クラス:targetがありますか?jQueryには:CSS3に似た:target疑似クラスがありますか?

もしそうなら、デモがいいでしょう。

ありがとうございます!

+0

を私はあなたがpsudo・クラスを選択することができるとは思いません。 –

+0

':target'コンセプトがjQueryとどのように機能するのかよく分かりません。 – lonesomeday

+0

@lonesomeday私も!古いブラウザの代替機能があるのか​​不思議です。 –

答えて

5

は内蔵、私はそうは思いませんが、あなたはそうのようなジェリー - リグ1でした:

$(location.hash); 

編集:おかげで、グラハム

ANOTHER EDIT:ここ:targetにjQueryの同等の例です。古いブラウザはwindow.onhashchangeイベントを認識しないかもしれない、とlocation.hashは、一般的に(location.hash = this.href.substring(this.href.indexOf('#'));が事前に呼び出されていない限り、ハンドラ中にjQueryのセレクタに利用できない新しいハッシュをレンダリング)アンカータグのonclickイベントのハンドラの終了時に更新されているので、我々はする必要があります代わりに、セレクタとしてクリックされたアンカーのクリッピングhref値を使用します。http://jsfiddle.net/xPMzV/

+0

この縫い目は面白いです。以下のようなデモを提供できますか?http://jsfiddle.net/Daniel_Hug/c9BvU/ –

+1

以下を参照してください。ハッシュプロパティにリテラルハッシュ記号が含まれるため、接頭辞「#」は必要ありません。 – Graham

+0

ああそうです。私は 'location.hash'の'# '文字を取り除くのによく慣れています。良いキャッチ。 – Aaron

1

簡単、ちょうど行います

$(window.location.hash) 
3

それはdocument.querySelectorAll():target擬似両方をサポートするブラウザで動作します(IE7とIE8)を使わないブラウザではエラーをスローします。これは、jQueryがブラウザのネイティブdocument.querySelectorAll()(利用可能な場合)を使用し、それ以外の場合はsizzleセレクタエンジンにフォールバックするためです。うるさく、Sizzle does not support the :target selector

シズルは、事実上すべてのCSS 3 Selectorsサポートしています - これはさえ、まれに、このような文書順で返さエスケープセレクタ(「.fooという\ +バー」)、Unicodeのセレクタ、および結果として実装されているいくつかの部品が含まれています。 CSS 3のセレクタのサポートにはいくつかの注目すべき例外があります(この決定の理由はfound hereをすることができます):

  • ルート:ターゲット
  • :n番目の-最後の子
  • 最後の型/:第一の型/:第n-最後の型/:/の型、n番目の専用の型
  • :langの()

sizzleは:targetをサポートしていないため、jQueryは古いブラウザで使用されているとエラーになります。

さまざまなブラウザでこのページを試してみてください:http://jsfiddle.net/gilly3/NPNFg/

良いニュースは、:targetセレクタを自分で追加することは簡単ですです:

$.expr[":"].target = function (node) { 
    var t = location.hash.substr(1); 
    return t && node.id == t || node.name == t; 
} 

の作業のデモ:http://jsfiddle.net/gilly3/NPNFg/3/

編集:ますIE7とIE8を:targetのスタイル定義、replaを複製して:targetスタイルと連携させることができます:target.target。ルール定義のセレクタで:target疑似クラスを使用しようとすると、IE8はその上でチョークし、ルールをまったく解析しないため、定義全体を複製する必要があります。あなたのスタイルを複製した後、hashchangeプラグインを使用して、このコードを使用しますyour jsfiddleから適応デモの作業

$(function() { 
    try { 
     $(":target"); 
    } 
    catch (err) { 
     $.expr[":"].target = function (node) { 
      var t = location.hash.substr(1); 
      return t && node.id == t || node.name == t; 
     } 
     $(window).hashchange(function() { 
      $(".target").removeClass("target"); 
      $(":target").addClass("target"); 
     }); 
    } 
}); 

http://jsfiddle.net/gilly3/c9BvU/6/

関連する問題