Question

我正在使用下面的代码，因此我可以点击标签内容中的链接并在同一页面上打开另一个标签（不跳页）。我为链接（'jump'）添加了一个特殊类，用于那些我想要“跳转”到另一个标签内的锚点的链接。

这对我有用，但必须有一种更有效的方式来写这个：

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 );});

我可以不为EACH标签写一行（两次！）吗？

Answer 1

你可以迭代并只修改选择器

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++;
  }

带链接的更高效的jquery选项卡

1 个答案: