如何在一个jQuery UI选项卡中使用jQuery UI选项卡？

我正在使用jQuery UI选项卡（通过AJAX内容）什么，我需要做的是，在我的标签之一，我希望其他简单的jQuery UI选项卡意味着（内容通过AJAX），但它不工作.. 原谅如果我做错了什么:(如何在一个jQuery UI选项卡中使用jQuery UI选项卡？

<div id="tabs"> //these tabs are working fine 
    <ul> 
     <li><a href="<?php echo $this->url(array(), 'abc') ?>">A</a></li> 
     <li><a href="<?php echo $this->url(array(), 'asd') ?>">B</a></li> 
     <li><a href="<?php echo $this->url(array(), 'xyz') ?>">C</a></li> 
    </ul>

我添加下面的代码在我xyz控制器的看法，但它不工作

<script> 
    $(function() { 
     $("#tabss").tabs(); 
     }); 
</script> 

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

<div id="tabss-1"> 
    <p>abcd.......</p> 
</div> 

<div id="tabss-2"> 
    <p>xyz.......</p> 
</div> 

<div id="tabss-3"> 
    <p>abcd.......</p> 
    <p>content.......</p> 
</div>

我已经包括了所有这些

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

来源

2013-03-06 Fawad Ghafoor

最有可能''（“#tabss”）.tabs（）;'在页面上存在html之前运行，以便它定位。 '$（function（）{}）'不会延迟执行，因为DOMReady事件已经被触发。 – 2013-03-06 15:42:20

正如凯文乙组分出来，你的脚本来创建的XYZ控制器内部的标签，立即执行。

<script> 
    $(function() { 
     $("#tabss").tabs(); 
     }); 
</script>

的documnent.ready事件已经由您可以点击“C”标签得到这个数据加载的时间发射。该文件暗示，但没有明确规定，该AJAX内容延迟加载，这意味着它不会发出请求，直到该标签被点击。但是，如果你检查网络流量，你可以清楚地看到这种情况。

尝试更改'xyz'控制器的内容，让<script>标记设置tabss最后一个标签内容的所有HTML。就像这样：

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

<div id="tabss-1"> 
    <p>abcd.......</p> 
</div> 

<div id="tabss-2"> 
    <p>xyz.......</p> 
</div> 

<div id="tabss-3"> 
    <p>abcd.......</p> 
    <p>content.......</p> 
</div> 

<script> 
    $(function() { 
     $("#tabss").tabs(); 
     }); 
</script>

Yahoo和several other sources reccommend将任何对网页脚本在反正页面的结束，即使你使用的是库推迟执行，直到的document.ready。这是出于客户端性能原因。

来源

2013-03-06 19:22:40

我得到了解决这个问题的方案。在页面加载功能

放脚本在javascript

function pageLoad(sender, args) { 
     $(document).ready(function() { 
      $("#tabs").tabs(); 
     }); 
    }

现在，它的工作完美。

来源

2014-01-29 05:07:28 Arun

如何在一个jQuery UI选项卡中使用jQuery UI选项卡？

回答

相关问题