Question

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

所以在这个例子中，一切都有效。 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>

Answer 1

使用喜欢，

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

修改

    $(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;
    });
  });

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

1 个答案: