How to navigate to a special tab in jquerytools tab / slide?

Question

I see no function in tabs documentation, neither in slideshow documentation to let us manually choose a specific tab / slide.

There ARE next() and prev(), but not something like a goTo( slideIndex ).

---

UPDATE 1 after Spokey's answer:

As I have activated slide change on mouseover, the code $('#accordion img:eq(0)').mouseover(); had to do the trick for me, but it doesn't.

The complete code:

$("#accordion").tabs("#accordion div", {
    tabs: 'img.tab',
    effect: 'fade', /*horizontal*/
    event: 'mouseover'
});

$('#accordion').mouseleave(function(){
    // Following line doesn't act
    $('#accordion img:eq(0)').mouseover();
    // While the following alert() states that the selector is ok
    alert($('#accordion img:eq(0)').attr('src'));
})

---

UPDATE 2

We know that there are some tabs that user can see each one by mouseover. In this place WHAT EXACTLY I WANT is that if the user leaves the whole tabs (div#accordion in this example), only a special tab (called default tab) to be activated. In other words the last active tab should change to the default tab on mouseleave.

Please tell me what exactly should be in $('#accordion').mouseleave(function(){ and });?

Answer 1

These tools don't seem to have the best documentation, but the slideshow most definitely has a manual slide tab selector.

From: the standalone demo

For a better view: http://jsfiddle.net/upbzy/3/

<!-- the tabs -->
<!-- IMPORTANT BIT -->
<div class="slidetabs"> <a href="#">slide 1</a>
 <a href="#">slide 2 </a>
 <a href="#">slide 3</a>

</div>

  $(function () {
      $(".slidetabs").tabs(".images > div", {

          // enable "cross-fading" effect
          effect: 'fade',
          fadeOutSpeed: "slow",

          // start from the beginning after the last tab
          rotate: true

          // use the slideshow plugin. It accepts its own configuration
      }).slideshow();

      //added for demo purposes only
      $('.slidetabs a').click( function(){
          $('body').toggleClass('green');
      });
  });

Update:

I think you may be looking for something like this:

Working Example

$(function () {
    $("#accordion").tabs("#accordion > div", {
        tabs: 'img.tab',
        effect: 'fade',
        event: 'mouseover'
    });

    $('#accordion').mouseleave(function () {
        $('#accordion img:eq(0)').tabs("#accordion > div");
        $('.tab').first().addClass('current').siblings().removeClass('current');
    });

});

Answer 2

I haven't found one either but a workaround would be to trigger the click event manually.

For tabs something like

$('.box .tabs li:eq(0) a').click()

NOTE: The tabs API seems to have some sort of click(index) method

And for the slideshow you click on the pagination

$('.slidetabs a:eq(0)').click()

In the above example you give the index of the slide/tab in :eq()