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:
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.)
#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