I've implemented the tabview feature from the YUI3 library.
This is how the markup code appears:
<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>
You can view a demo of this markup here: http://jsfiddle.net/zb6su/
The challenge I'm facing involves writing JavaScript code to select a tab based on the tabview-panel. For example, if I have the id foo, I want to select the tab with a[href=#foo].
Unfortunately, using a[href=#foo] as a CSS selector doesn't work because # denotes Ids. I also tried using a[href="#foo"] without success. Is there a way to select a link based on the URL fragment in the href attribute using a CSS selector?
I could loop through all nodes and check the href attribute in JavaScript, but I'd prefer a CSS solution if possible.
Update: After further testing, it seems that the selector does work. The issue lies with FireFinder (an extension I am using to test selectors).