[whatwg] getElementsByClassName()

[Michel Fortin]

Le 2006-02-03 à 19:20, Simon Pieters a écrit :

>> I have a some markup like this:
>>
>>     <ul>
>>         <li><a href="#tab1">Tab 1</a></li>
>>         <li><a href="#tab2">Tab 2</a></li>
>>     </ul>
>>
>>     <div id="tab1" class="pane">
>>         ...
>>     </div>
>>
>>     <div id="tab2" class="pane">
>>         ...
>>     </div>
>>
>> With the help of a style sheet, the script transforms this into  
>> some  sort of tab view. It search for each div of class "pane". It  
>> looks  for links pointing to each of these div elements and attach  
>> an event  to each so that when you click on the link it shows the  
>> pane (and  hides other panes).
>
> You could do this with the following CSS:
>
>   .pane:not(:target) { display:none; }
>
> Thus getElementsByClassName() is not needed for this use case.

Hum, I suppose so, but that's only because I have skipped the part  
where I also want the link to be styled differently when its pane is  
shown, not just the targeted pane. The thing must look like a  
multiple-tab view after all.

But surely, combining this CSS with a way to listen to changes to the  
current ":target" element (so I can style the links) could do the  
work beautifully. In fact, an event to catch changes made to the  
fragment identifier would be very useful here and in many other  
situations (I'm thinking of all these AJAX apps that wish to keep a  
permanent link by changing the fragment identifier while still  
working well with the back button).


Michel Fortin
michel.fortin at michelf.com
http://www.michelf.com/