如何使用jquery ui选项卡制作表内切换选项卡的元素

嗨，我想要做的是创建一个选项卡式分页，其中表内的元素也可以用来切换到另一个选项卡。我能够使用jquery ui制作标签，但问题是当我单击表格中的元素时，它不会切换到另一个标签。这里是我的代码如何使用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>

来源

2015-06-21 Onedaynerd

当你问一个问题，最好包括*特定的错误*，显示任何解决问题的尝试，并显示研究工作[等等]（http： //stackoverflow.com/help/how-to-ask）。 – Anonymous

没有错误。顶部的选项卡工作，但表内的元素不是 – Onedaynerd

如果这是您的整个代码并且没有错误，我会感到非常惊讶。是否有更多的代码显示你没有显示（记住代码应该是*最小*和*可验证*）？ – Anonymous

尝试添加以下内容到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

来源

2015-06-21 02:16:55 NightOwlPrgmr

它不起作用。我是否必须替换我的jquery代码或只添加您在其下面写的代码？ – Onedaynerd

只需在下面添加它。你仍然需要你的代码来启用jQueryUI选项卡的功能 – NightOwlPrgmr

它仍然没有工作..我会尝试玩你的代码感谢给我一个想法 – Onedaynerd

如何使用jquery ui选项卡制作表内切换选项卡的元素

回答

相关问题