2

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

2 Answers 2

2

#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

1
  • I used to make this mistake too. I only learnt about > and + selectors a few days back. CSS path is quite powerful
    – SoWhat
    Feb 14, 2012 at 5:02
0

children() returns only direct children so the div under the tab div remains hidden.

I made your code a little smaller by removing unneeded loops etc:

http://jsfiddle.net/TtCLQ/6/

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.