1

我正在使用 jQuery UI 选项卡（通过 AJAX 的内容）我需要做的是在我的一个选项卡中我想要其他简单的 jQuery UI 选项卡意味着（内容不是通过 AJAX）但它不起作用.. 请原谅我做错了什么:(

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

2 回答 2

1

正如 Kevin B 指出的那样，您在 xyz 控制器中创建选项卡的脚本会立即执行。

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

当您可以单击“C”选项卡以加载此数据时，documnent.ready 事件已经触发。文档暗示但没有明确说明 AJAX 内容是延迟加载的，这意味着它不会在单击选项卡之前不要发出请求。但是如果您检查网络流量，您可以清楚地看到这种情况。

在标签内容本身的所有 HTML 之后，尝试更改“xyz”控制器的内容<script>以设置最后一个标签。tabss像这样：

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

雅虎和其他几个来源建议将任何页面脚本放在页面末尾，即使您使用库来延迟执行直到 document.ready。这是出于客户端性能的原因。

于 2013-03-06T19:22:40.723 回答
1

我得到了这个问题的解决方案。

将脚本放入javascript中的页面加载功能

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

现在它的工作完美。

于 2014-01-29T05:07:28.957 回答