I recently decided to use one of the cool new features of Dreamweaver CS3 in a site I was developing – the Spry AJAX Framework – more specifically the Spry Tab widget.  After Googling for a bit I couldn’t seem to find any page that showed how to make the tabs switch by clicking a link either inside the content of the tab or somewhere else on the page.

The first link I found recommended using the query string of the URL to tell Spry that you wanted to open a different tab.  Although this approach works, it requires including another javascript file and adding a bunch of unnecessary syntax at the end of your links.  Since many sites already do this when they’re loading actual pages, I think this method could get confusing.  This method, however, is the only way to make it so your browser’s back button will work between tabs.

It turns out, after browsing the SpryTabbedPanels.js file, this is pretty easy to accomplish with plain javascript (if you don’t mind the back button functionality not working).  You will be invoking the showPanel() method of your tab control.  You must call this function on the main tab control’s id.  Below is an example of what it would look like if your Tab Control was named “TabbedPanels1” (the default in Dreamweaver CS3).

 Click Here to See The Example Above in Action

Click Here to Download the Source Files