CODEWITHSUNDEEP
jqueryjquery-uidomjquery-ui-tabs
Swaroop Nagendra
Swaroop Nagendra

Reputation: 605

Jquery tabs selection through different DOM elements

I have 4 tabs on a page with the following code:

<div id="tabs">
  <ul>
    <li><a href="#tab-brandy">BRANDY</a></li>
    <li><a href="#tab-whisky">WHISKY</a></li>
    <li><a href="#tab-gin">GIN</a></li>
    <li><a href="#tab-wine">WINE</a></li>
  </ul>

  <div id="tab-brandy">
    <!-- Tab brandy contents -->
  </div>

  <div id="tab-whisky">
    <!-- Tab whisky contents -->
  </div>

  <!-- Similarly tab GIN and tab WINE -->

There is a button element like this, inside the tab-brandy:

 <button id="#moveToWhisky">WHISKY</button>

I wanted to change the tab to "tab-whisky" when button with id "#moveToWhisky" was clicked.

So here was the script for that:

//Document ready
  $("#tabs").tabs({
    var tabOpts = {
     selected: 1
    };
    $("#Tabs").tabs(tabOpts);
  });

The above method did not work, so I tried this:

    $("#tabs").tabs({
      $("#tabs").tabs("select", 2) //2 is tab number
  });

So finally did this:

    $("#moveToWhisky").click(function(){
        $("#tabs").tabs("select", 2);
     });

Nothing seems to work, what am i doing wrong?

Upvotes: 0

Views: 303

Answers (1)

sroes
sroes

Reputation: 15053

To set the active tab, you need to call the option method to change the value of active:

$("#tabs").tabs("option", "active", 2);

Upvotes: 3

Related Questions