3 Tips for Working with the AjaxControlToolkit's TabContainer Control
#1: How To Change the Selected Tab When the Tab Header is MousedOver
By default the tab control will switch the selected tab when a different tabs' header is clicked. Depending upon the content you are displaying, you might find it useful to change the selected tab as the user mouses over a different tab. I saw an example of this on designflavr.com. This site has a tab control that displays the categories and tags and some other miscellaneous links. These items are collected into a tab control that has been placed in the right hand sidebar.
- get a reference to each of the tab panels
- attach an event handler to the tab header's mouseover event
- when the mouseover event fires, set it as the selected tab
#2: How To Change the Selected Tab Using Navigation Buttons
And this is how you can bind it to a Next and Previous buttons ...
#3: How to Center the Tab Headers Horizontally
Last tip - you want to center the tab headers like so ...
Just set the text-align of the .ajax__tab_header class to center.
That's it. Enjoy!