如何使用 jquery ui 选项卡在表内切换选项卡中的元素答案

【问题标题】：How to make element inside table switch tabs using jquery ui tabs如何使用 jquery ui 选项卡在表内切换选项卡中的元素
【发布时间】：2015-06-21 02:06:44
【问题描述】：

您好，我正在尝试创建一个选项卡式分页，其中表格内的元素也可用于切换到另一个选项卡。我能够使用 jquery ui 使选项卡工作，但问题是当我单击表内的元素时，它不会切换到另一个选项卡。这是我的代码

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Table</a></li>
    <li><a href="#tabs-2">Employee info</a></li>
  </ul>
  <div id="tabs-1">

       <table>
      <tr>
        <td><a href="#tabs-2">ABC123</a></td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td><a href="#tabs-2">ABC124</a></td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>
  </div>
  <div id="tabs-2">
    <p>Info about ABC123 When clicked</p>
  </div>

</div>

【问题讨论】：

当您提出问题时，最好包括具体错误，显示解决问题的任何尝试，并显示研究工作，among other things。
没有错误。顶部的选项卡有效，但表格内的元素无效
如果这是您的全部代码并且没有错误，我会感到非常惊讶。您的代码是否还有其他未显示的内容（请记住，代码应该是minimal 和verifiable）？

标签： javascript jquery jquery-ui tabs jquery-ui-tabs

【解决方案1】：

尝试将其添加到您的 jQuery 中：

$(".tab2").on("click", function() {
    $("#tabs").tabs("option", "active", 1);
});

另外，将您的 HTML 更改为：

<table>
  <tr>
    <td><a class="tab2">ABC123</a></td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td><a class="tab2">ABC124</a></td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Documentation

【讨论】：

它不起作用。我必须替换我的 jquery 代码还是只添加你在它下面写的代码？
在下方添加即可。您仍然需要您的代码来启用 jQueryUI 选项卡功能
它仍然不起作用..我会尝试使用您的代码感谢您给我一个想法
@Onedaynerd 没问题。看看这个fiddle