2

我对 jqueryUI 有一点问题。我注意到当我将内容附加到页面时，UI 似乎没有生效。我尝试了这个示例，它似乎按预期工作，但是当我尝试扩展它时没有运气。

我的代码中有这个

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#tabs" ).tabs();
    $('#tabs-1').click(function() {
        $('.boo').load('boo.html');
    });
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
Hello World!

    <div class="boo">

    </div>
  </div>
  <div id="tabs-2">

  </div>
  <div id="tabs-3">

    <p>Some Test</p>
  </div>
</div>


</body>
</html>

我在 boo.html 中有这个

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tabb</a></li>
    <li><a href="#tabs-2">More  </a></li>
    <li><a href="#tabs-3">iFinal</a></li>
  </ul>
  <div id="tabs-1">
      First Tab
  </div>
  <div id="tabs-2">
      Second Tab
  </div>
  <div id="tabs-3">
      Final Tab
  </div>
</div>

我期待在第一个选项卡中看到一个选项卡。但这是我看到的

在此处输入图像描述 任何帮助，将不胜感激。

4

3 回答 3

0

第一个问题是您使用 id 命名两个选项卡。考虑将它们更改为类。然后在每个 DOM 更改后，对该类调用 .tabs() 如下：

嘘.html

<div class="tabs">
  <ul>
     <li><a href="#booTab1">Tabb</a></li>
     <li><a href="#booTab2">More</a></li>
     <li><a href="#booTab3">iFinal</a></li>
  </ul>
  <div id="booTab1">First Tab</div>
  <div id="booTab2">Second Tab</div>
  <div id="booTab3">Third Tab</div>
</div>

父代码：

<div class="tabs" id="tabContainer">
  <ul>
     <li><a href="#tabContainerTab1">Nunc tincidunt</a></li>
     <li><a href="#tabContainerTab2">Proin dolor</a></li>
     <li><a href="#tabContainerTab3">Aenean lacinia</a></li>
  </ul>
  <div id="tabContainerTab1">
     <p>Hello World!</p>
     <div class="boo"></div>
  </div>
  <div id="tabContainerTab2"></div>
  <div id="tabContainerTab3"><p>Some Test</p></div>
</div>

<script type="text/javascript">
   $(function() {
      $( ".tabs" ).tabs();
      $('#tabContainerTab1').click(function() {
         $('.boo').load('boo.html', function () { 
            $('.tabs').tabs();
         });
       });
    });
</script>
于 2013-10-31T18:50:20.573 回答
0

您应该添加 $( ".boo #tabs" ).tabs(); 在加载内容后的点击事件中，因为您的 tabs() 函数将不适用于未来的元素。

$("#tabs").tabs(); //this work only in the first id
$('#tabs-1').click(function() {
    $('.boo').load('boo.html', function() {
        $(this).find("#tabs").tabs(); //after complete load, convert tabs inside .boo
    });
});

编辑。此外，您必须为每组选项卡命名不同的**小提琴**

您的 boo.html 应该看起来更像这样（因为 href=#tabs-1 打开 id=tabs-1 所以它们不能重复）：

<div id="subtabs">
    <ul>
        <li><a href="#subtabs-1">Tabb</a></li>
        <li><a href="#subtabs-2">More  </a></li>
        <li><a href="#subtabs-3">iFinal</a></li>
    </ul>
    <div id="subtabs-1">
          First Tab
    </div>
    <div id="subtabs-2">
          Second Tab
    </div>
    <div id="subtabs-3">
          Final Tab
    </div>
</div>
于 2013-10-31T18:08:01.617 回答
0

您需要在新内容加载后初始化选项卡。使用完整的负载回调来做到这一点。还应该将 clcik 处理程序委托给始终存在的元素。当您删除或替换元素时，绑定到它的任何事件处理程序都将丢失。

$(document).on('click','#tabs-1',function() {
       $('.boo').load('boo.html', function(){
           /* new content exists now, can run code on it*/
           $( "#tabs" ).tabs();
       });
});
于 2013-10-31T18:12:23.777 回答