Question

I have a question regarding a tabs script (not jquery ui tabs). I want to select the tab with a normal text link on top of the page. The tabs are at the bottom of the page. I was hoping this could be achieved with an anchor, but no….

The link:

<a class="reviewslink" href="#reviews">blabla</a>

The script for clicking on the tabs itself:

$('.tabs a').click(function(){
        var tabs = $(this).closest('.tabs');
        var pages = tabs.next();
        tabs.find('a').closest('li').removeClass('active');
        pages.find('.page').removeClass('active');
        $(this).closest('li').addClass('active');
        pages.find('.page.'+$(this).attr('rel')).addClass('active');
        return false;
    });

The HTML:

<div class="tabs">
          <ul>
            <li class="active"><a rel="bestellen" href="#">Test</a></li>
            <li><a rel="ruilen" href="#" name="maattabel">Test1</a></li>
          </ul>
        </div>

        <div class="tabsPages">
         <div class="page bestellen active"></div>
         <div class="page ruilen"></div>
        </div>

I tried this below but that doesn’t work, obvious. I can’t figure out how I should do this.

  $('.reviewslink').click(function() { // bind click event to link

        var tabs = $(this).closest('.tabs');
        var pages = tabs.next();
        tabs.find('a').closest('li').removeClass('active');
        pages.find('.page').removeClass('active');

        tabs.select('select', 3).addClass('active');
        pages.find('.page.reviews.'+$(this).attr('rel')).addClass('active');

        return false;
  });

Any help greatly appreciated.

Answer 1

The example HTML does not seam to be complete and/or consistent, but I think I understand what you are trying to do. How about sending a click event to the tab?

$('.reviewslink').click(function() {
    var name = $(this).attr('href').substr(1);
    var tab = $('a[name=' + name + ']');
    tab.click();
    return false;
}

For this code to work you need to add name="reviews" to the a element of the tab that you want to be selected when clicking the link.