Question

$(function () {

   var $tabs = $("#tabs");
   $tabs.tabs();
   $tabs.tabs("option", 'disabled', [1, 2, 3]);

   function getSelectedTabIndex() {
      return $tabs.tabs('option', 'selected');
      return $tabs.tabs('enable', $tabs);
      return $tabs.tabs('option', 'actaive',$tabs);
   }

   $("#goNext").click(function () {         
      var b = getSelectedTabIndex() + 1;
      $tabs.tabs('enable',b);
      $tabs.tabs('option', 'active', b);
      $tabs.tabs('option', 'selected', b);
   });
});

我的代码以正确的方式进行，但只有问题是当用户点击下一个按钮我以前要隐藏它不应该发生，当用户点击下一个按钮时，下一个标签将与之前的标签一起显示请告诉我变化。

Answer 1

更改

function getSelectedTabIndex() {
    //1.8
    return $tabs.tabs('option', 'selected');
    //Code below is unreachable
    return $tabs.tabs('enable', $tabs);
    return $tabs.tabs('option', 'actaive',$tabs);
}

到

function getSelectedTabIndex() {
   return $tabs.tabs('option', 'active');
}

每个方法只应执行一项任务并正确执行。如果您尝试进行更多更改，请找到getSelectedTabIndex()

以外的更好的地方

Answer 2

  return $tabs.tabs('option', 'selected');
  return $tabs.tabs('enable', $tabs);  // This will not called ever
  return $tabs.tabs('option', 'actaive',$tabs); // This will not called ever

更多请发贴一些HTML或创建小提琴。

Answer 3

设置全局变量以存储当前选项卡索引

var currTabIndex // globle variable

$( "#tabs" ).tabs({
     collapsible: false,
     activate: function( event, ui ) {
         currTabIndex = ui.newTab.index();
     }
});

在下一个按钮的点击事件中

$("#goNext").click(function () {
    $( "#tabs" ).tabs( "option", "active", currTabIndex + 1 );
});

当用户单击下一个按钮时，屏幕上将只显示下一个选项卡以及上一个选项卡

3 个答案: