CODEWITHSUNDEEP
javascriptjquery
Ravi Mule
Ravi Mule

Reputation: 404

when user click on next button then only next tab will appear on screen along with previous tab

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

My code goes in correct way but only the problem is when user click on next button my previous is going to hide it should not be happen, when user click on next button next tab will be visible along with previous tab please tell me the changes.

Upvotes: 0

Views: 154

Answers (3)

YashPatel
YashPatel

Reputation: 295

set globle variable to store a current tab index

var currTabIndex // globle variable

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

In the click event of next button

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

Upvotes: 0

Sully
Sully

Reputation: 14943

Change

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

to

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

Each method should do only one task and do it correctly. If you are trying to do more changes then find a better place other than getSelectedTabIndex()

Upvotes: 1

A.T.
A.T.

Reputation: 26382

  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

for more please post some html or create fiddle please.

Upvotes: 0

Related Questions