Question

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

我的代码中有这个

<!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>

我希望在第一个标签中看到一个标签。但这就是我所看到的

enter image description here 任何帮助将不胜感激。

Answer 1

你应该添加$（“。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
    });
});

编辑。此外，您必须为每组标签** Fiddle **

命名不同的名称

你的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>

Answer 2

您需要在新内容投标后初始化标签。使用完整的负载回调来执行此操作。还应该将clcik处理程序委托给始终存在的元素。删除元素或替换元素时，绑定到它的任何事件处理程序都将丢失。

$(document).on('click','#tabs-1',function() {
       $('.boo').load('boo.html', function(){
           /* new content exists now, can run code on it*/
           $( "#tabs" ).tabs();
       });
});

Answer 3

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

boo.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>

如果附加了div，则jquery UI不适用

3 个答案: