Question

您正在尝试做的是创建一个标签页面，其中表格中的元素也可用于切换到另一个标签。我能够使用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>

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 tabs

1 个答案: