2
\$\begingroup\$

I am using jQuery UI Tabs for a web application and I would like to navigate thru different tabs with these four buttons:

  • next-tab: takes you to the next tab
  • prev-tab: takes you to the previous tab
  • preview-btn: takes you to the preview tab (a specific tab or the last tab)
  • back-btn: takes you to the last active tab from preview tab (in my code does not work yet).

For example, if you were in the tab no 2 and clicked on preview-btn, it takes you to the preview-tab. If you click on the back-btn, it should take you back to the tab no. 2.

How can I achieve all these goals in an efficient way?

(document).ready(function() {

  // initializing the tabs
  $('#tab-container').tabs();

  // tabs min height
  $('#tab-container').tabs().css({
    'min-height': '500px',
    'overflow': 'auto'
  });

  // takes you to the next tab
  $(".next-tab").click(function() {
    var active = $("#tab-container").tabs("option", "active");
    $("#tab-container").tabs("option", "active", active + 1);
  });

  // takes you to the previous tab
  $(".prev-tab").click(function() {
    var active = $("#tab-container").tabs("option", "active");
    $("#tab-container").tabs("option", "active", active - 1);
  });

  // takes you to the preview tab
  $(".preview-btn").click(function() {
    $("#tab-container").tabs("option", "active", 5);
  });

  // takes you back to your last tab from preview tab
  $(".back-btn").click(function() {
    var active = $("#tab-container").tabs("option", "active");
    $("tab-container").tabs("option", "active", active);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab-container">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>
    </li>
    <li><a href="#tabs-2">Proin dolor</a>
    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>
    </li>
    <li><a href="#tabs-4">Aenean lacinia</a>
    </li>
    <li><a href="#tabs-5">Aenean lacinia</a>
    </li>
  </ul>
  <div id="tabs-1">
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
  <div id="tabs-4">
  </div>
  <div id="tabs-5">
  </div>
</div>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.