more efficient jquery tabs with links

Question

i'm using the code below so i can click on a link INSIDE a tab's content and open up another tab on the same page (without the page jumping). i added a special class to the link ('jump') for those links that i do want to 'jump' to the anchor inside another tab.

this works for me, but there MUST be a more efficient way of writing this:

var $tabs = $("#tabs").tabs();
$('.ui-tabs-panel a.tab1').click(function(e) {e.preventDefault(); $tabs.tabs( "option", "active", 0 );});
$('.ui-tabs-panel a.tab2').click(function(e) {e.preventDefault(); $tabs.tabs( "option", "active", 1 );});
$('.ui-tabs-panel a.tab3').click(function(e) {e.preventDefault(); $tabs.tabs( "option", "active", 2 );});
$('.ui-tabs-panel a.tab4').click(function(e) {e.preventDefault(); $tabs.tabs( "option", "active", 3 );});
$('.ui-tabs-panel a.tab5').click(function(e) {e.preventDefault(); $tabs.tabs( "option", "active", 4 );});
$('.ui-tabs-panel a.tab6').click(function(e) {e.preventDefault(); $tabs.tabs( "option", "active", 5 );});
$('.ui-tabs-panel a.tab7').click(function(e) {e.preventDefault(); $tabs.tabs( "option", "active", 6 );});
$('.ui-tabs-panel a.tab8').click(function(e) {e.preventDefault(); $tabs.tabs( "option", "active", 7 );});
$('.ui-tabs-panel a.tab9').click(function(e) {e.preventDefault(); $tabs.tabs( "option", "active", 8 );});

$('.ui-tabs-panel a.tab1jump').click(function(e) {$tabs.tabs( "option", "active", 0 );});
$('.ui-tabs-panel a.tab2jump').click(function(e) {$tabs.tabs( "option", "active", 1 );});
$('.ui-tabs-panel a.tab3jump').click(function(e) {$tabs.tabs( "option", "active", 2 );});
$('.ui-tabs-panel a.tab4jump').click(function(e) {$tabs.tabs( "option", "active", 3 );});
$('.ui-tabs-panel a.tab5jump').click(function(e) {$tabs.tabs( "option", "active", 4 );});
$('.ui-tabs-panel a.tab6jump').click(function(e) {$tabs.tabs( "option", "active", 5 );});
$('.ui-tabs-panel a.tab7jump').click(function(e) {$tabs.tabs( "option", "active", 6 );});
$('.ui-tabs-panel a.tab8jump').click(function(e) {$tabs.tabs( "option", "active", 7 );});
$('.ui-tabs-panel a.tab9jump').click(function(e) {$tabs.tabs( "option", "active", 8 );});

can i do this without writing a line for EACH tab (twice!) ?

http://codereview.stackexchange.com/ – j08691 Jul 10 '13 at 17:06 — j08691, Jul 10 '13 at 17:06

score 1 · Answer 1 · answered Jul 10 '13 at 17:12

you could iterate through and just modify the selector

var i = 1;
while (i<10)
  {
    $(".ui-tabs-panel a.tab" + i).click(function(e) {e.preventDefault(); $tabs.tabs( "option", "active", (i-1_ );});
    $('.ui-tabs-panel a.tab' + i + 'jump').click(function(e) {$tabs.tabs( "option", "active", (i-1) );});
    i++;
  }

more efficient jquery tabs with links

1 Answers1