如何在单击选项卡时激活功能

How to activate a function on clicking a tab?

本文关键字:激活 功能 选项 单击      更新时间:2023-09-26

我有两个选项卡,每个选项卡显示不同的详细信息。在点击第二个选项卡时,我创建了一个按钮,点击它将显示某些细节。但我想知道是否有任何方法可以在单击选项卡时直接调用该函数。我试着激活功能,但它无法工作。

        $(function() {
        $( "#tabs" ).tabs({
        activate: function( event, ui ) {
        fn.my_function(); }
        });
        });

此外,我想知道使用激活功能是否是一个不错的选择,因为该功能仅适用于第二个选项卡。

这是我的标签代码:

      <div id="tabs">
      <ul>
      <li><a href="#tabs-1">DEMO</a></li>
      <li><a href="#tabs-2">Details 

      </a></li>
       </ul>
       <div id="tabs-1">
       <p><font color="blue"> Code </font>: Code number</p></br>
       <div id='popup-close'>Close</div>
       </div>
        <div id="tabs-2">
        <p></p>
          <input type="submit" name="call_function" id="call_function" value="Click for details"       />
             <table id='content'></table> // this is to display the details listed by the       function in the table format.
             <div id='popup-close1'>Close</div>
             </div>

任何解决这一问题的建议都将不胜感激。

基本上,只需向特定选项卡添加一个id,就可以触发该选项卡的函数:

<li><a id="tab1" href="#tabs-1">DEMO</a></li>
...
$("#tab1").click(...);

另一种选择是编写一个合适的选择器来获得第一个/第二个/第n个。。。<li>元素:

$("#tabs ul li:nth-child(2)").click(...)