如何在jQuery选项卡中使用.on（）获取子页面内容？

时间：2022-06-25 08:18:41

After some research I now have links in my jQuery tabs loading additional pages within the current tab. What I am trying to understand now is how to get the additional sub page links to also stay within the tab.

经过一些研究后,我现在在jQuery选项卡中有链接,在当前选项卡中加载其他页面。我现在想要了解的是如何使其他子页面链接也保留在选项卡中。

So in this example everything works to a point. tabtest.htm loads the tabs and in Main One clicking Sub One A loads sub1a.htm in the tab. Clicking the link within sub1a.htm breaks me out of the jquery/tab universe. I would like to learn how to get links in that page to also use the "link within the current tab" code.

所以在这个例子中,一切都是有用的。 tabtest.htm加载选项卡,在Main One中单击Sub One A在选项卡中加载sub1a.htm。单击sub1a.htm中的链接会使我脱离jquery / tab Universe。我想学习如何在该页面中获取链接以使用“当前选项卡中的链接”代码。

tabtest.htm

<html>
<head>
<script src="/m/j/jquery-1.9.1.js"></script>
<script src="/m/j/jquery-ui-1.10.3.custom.min.js"></script>
<link href="/m/c/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css"></link>

<script type="text/javascript">
 $(function() {
    $("#tabs").tabs({
      load: function(event, ui) {
      $("a", ui.panel).click(function() {
        $(ui.panel).load(this.href);
          return false;
        });
      }
    }),
    $('.ui-tabs-panel a').click(function() {
      $(this).closest('.ui-tabs-panel').load(this.href);
      return false;
    });
  });
  </script>
</head>
<body>
   <div id="tabs" >
    <ul>
       <li><a href="mainone.htm">Main One</a></li>
       <li><a href="maintwo.htm">Main Two</a></li>
      <li><a href="mainthree.htm">Main Three</a></li>
    </ul>
  </div>
</body>
</html>

mainone.htm

<h1>Main One</h1>
<a href="sub1a.htm">Sub One A</a>
<a href="sub1b.htm">Sub One B</a>

sub1a.htm

<h1>Sub One A</h1>
<a href="mainone.htm">Main One</a>

1 个解决方案

#1

1  

use like,

$(document).on("click",".ui-tabs-panel a",function() {
});

Edit

    $(function() {
    $("#tabs").tabs({
      load: function(event, ui) {
      $("a", ui.panel).click(function() {
        $(ui.panel).load(this.href);
          return false;
        });
      }
    }),
    $(document).on("click",".ui-tabs-panel a",function() {
      $(this).closest('.ui-tabs-panel').load(this.href);
      return false;
    });
  });

#1

1  

use like,

$(document).on("click",".ui-tabs-panel a",function() {
});

Edit

    $(function() {
    $("#tabs").tabs({
      load: function(event, ui) {
      $("a", ui.panel).click(function() {
        $(ui.panel).load(this.href);
          return false;
        });
      }
    }),
    $(document).on("click",".ui-tabs-panel a",function() {
      $(this).closest('.ui-tabs-panel').load(this.href);
      return false;
    });
  });
标签：

相关文章