如何使用 jquery ui 选项卡使 table 内的元素切换选项卡

Question

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

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

Answer 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 ui 选项卡使 table 内的元素切换选项卡

How to make element inside table switch tabs using jquery ui tabs

javascript

jquery

tabs

jquery-ui

jquery-ui-tabs