Question

I’m trying to implement my own tabs, but in certain cases the :visible selector doesn’t appear to work as I think it should:

http://jsfiddle.net/TtCLQ/1/

In short, when a div contains only input type “image” or “file”, it appears that :visible is always returning false regardless of whether or not they are actually visible. (Tested on latest Chrome and IE9.)

Is this a bug, or am I expecting the wrong behavior? What should I be doing instead to detect if a div (and its children) is being displayed?

(In the fiddle, you can see that the :visible filter doesn’t appear to be working by looking at tab3’s style in firebug as you switch tabs around.)

Answer 1

#pane div selects all the divs in the #pane and sets them to displaY:none So the div inside the div inside the pane is also invisible. When you set the #tab3 to show, you are not showing the div inside, hence the problem. i.e #tab3 becomes visible, but #tab3>div doesn’t become visible. I updated the fiddle with

#pane>div
{ 
display:none;
}

This only selects the immediate child div and not the divs inside these divs. Another way is to add a class to the tabs (.tab)
and set their visibility collectively