1

YUI3 ライブラリの一部であるtabviewを使用しています。

マークアップは基本的に次のようになります。

<div id="demo" class="yui3-tabview-content">
  <ul class="yui3-tabview-list">
    <li class="yui3-tab yui3-widget yui3-tab-selected">
      <a href="#foo" class="yui3-tab-label yui3-tab-content" tabindex="0">foo</a>
    </li>
  </ul>
  <div class="yui3-tabview-panel">
    <div id="foo" class="yui3-tab-panel yui3-tab-panel-selected">
      <p>
        foo content
      </p>
    </div>
  </div>
</div>

マークアップのフィドル: http://jsfiddle.net/zb6su/

問題: JavaScript コードを書いていて、指定されたタブを選択したいと考えていますtabview-panel。fooこの場合、ID を取得できたとしましょう。でタブを選択したいのですがa[href=#foo]。

問題は、ID の選択に使用されるa[href=#foo]ため、まったく機能しないことです。#私もa[href="#foo"]無駄にしようとしました。href属性の URL フラグメントに基づいてリンクを選択する CSS セレクターはありますか?

JavaScript を使用すると、すべてのノードを繰り返し処理して href 属性を確認できることはわかっていますが、可能であれば CSS セレクターを使用することをお勧めします。

更新: セレクターは機能します。FireFinder (セレクターのテストに使用している拡張機能) のバグのようです。

4

1 に答える 1

3

同じセレクターで問題なく動作しますが、jQuery ( fiddle ) を使用します。

$('a[href="#foo"]').text();

「フー」を返します。CSS と同じ:

a[href="#foo"] {
    color:red;
}

の使用法ではなく、F21 の FireFinder に問題があったようですa[href="#foo"]。ケースを閉じました。

于 2012-08-27T05:57:45.317 に答える