Tabs Questions

I'm trying to figure out how to add a couple of things to the tabs scripts. First I would like to be able to clear the dotted border around the focused tab after clicking.

Next, is there any way for the script to add a class to all div's that it sees as tab content? I'd like to be able to style the tab content without adding a class in the html.

Finally, is it possible to have the script remove certain elements? For example, I have some links in the original page that say "back to top" and jump to the "top" id. It seems inappropriate to leave these visible in the tabbed interface.

Thanks for any help!

Posted November 7th, 2007 at 3:59pm by jon

1 - this should work

li a{text-decoration:none !important;outline-style:none;}

2 - dunno but u can always put all div tabs in to one div and in css

#divtabs div{styles for all}

3 - u can hide some elemnts

new Control.Tabs('tabs',{
             afterChange: function(new_container){  
                  if (new_container.id=='nameofdiv'){
                       $('hideme').style.display='none';
                  }else{
                       $('hideme').style.display='block';
                  }
             }  
        });

Posted November 8th, 2007 at 3:20am by wk

Thanks for the reply, but excuse me for being a bit new to this. Where exactly do I put that code to hide elements?

Posted November 8th, 2007 at 11:29am by jon

I got #'s 2 & 3 to work by the same method. I added:

this.activeContainer.addClassName(this.options.activeTabClassName);

and

this.activeContainer.removeClassName(this.options.activeTabClassName);

to the setActiveTab function, then I added:

activeTabClassName: 'activeTab',

to the options. This allowed me to style the tab <div> and allowed me to style specific elements within the tab <div> as well. So I could easily hide the #top links.

Posted November 8th, 2007 at 4:53pm by jon