通过不同的 DOM 元素进行 Jquery 选项卡选择

Question

我在一个页面上有 4 个标签，代码如下：

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

tab-brandy 里面有一个像这样的按钮元素：

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

当单击 ID 为 "#moveToWhisky" 的按钮时，我想将标签更改为“tab-whisky"”。

所以这是脚本：

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

上面的方法不行，所以我试试这个：

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

所以终于做到了：

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

似乎没有任何效果，我做错了什么？

Answer 1

要设置活动标签，您需要调用the option method to change the value of active：

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