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\$

0

Reset to default

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.