Question

Is it possible to combine a slideshow and show / hide div functionality?

My html structure is below, and basically, I’m trying to get the tabs > a links to open up the div with the corresponding class if a user clicks on it. If a user doesn’t click on it, it should still just cycle through each image. So, if the images are rotating, and I click on <a class="t2"> then would open. The thing is, it’s unknown how many divs / tabs there will be, but they’ll always be named t{n}.

<div id="tab-content">
   <div class="t1">content</div>
   <div class="t2">lorem ipsum</div>
   <div class="t3">knock knock</div>
</div>

<div id="nav">
   <div id="tabs">
      <ul>
         <li class="t1"><a class="t1" href="#">tab 1</a></li>
         <li class="t2"><a class="t2" href="#">tab 2</a></li>
         <li class="t3"><a class="t3" href="#">tab 3</a></li>
      </ul>
   </div>
</div>

Answer 1

[update]
I thought you only had an issue with the opening of the divs when you click the links..

For a complete slideshow that allows manual override from links have a look at the cycle plugin for jquery and in particular this demo ‘updateActivePagerLink’ Demo

[Original answer]

The following will add the functionality you want to all a elements inside the #tabs div
The functionality will be to show the element (inside #tab-content) with the same class as the a element that was clicked..

$('#tabs a').click( function() {
   $('#tabcontent .' + $(this).attr('class') ).show();
} );