代码之家 › 专栏 › 技术社区 › Pradyut Bhattacharya

远程jquery嵌套选项卡

nested tabs jquery

Pradyut Bhattacharya · 技术社区 · 16 年前

我在jquery选项卡中有嵌套的选项卡,如果我们想要静态jquery选项卡,这非常简单。

但是如果我们想要嵌套的标签,那么远程页面应该决定哪些是标签。

或者换言之,我希望在远程页面中嵌套选项卡(或者未加修饰)

例如,我通过标签调用这个页面(远程页面)

<div id="container-2">

  <ul>
  <li><a href="#fragment-1a"><span>Section 1a</span></a></li>
  <li><a href="#fragment-1b"><span>Section 1b</span></a></li>

  <li><a href="#fragment-1c"><span>Section 1c</span></a></li>

  </ul>
  <div id="fragment-1a">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-1b">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-1c">

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>

  </div>

在我的主页上

<script type="text/javascript">
$(function(){
$('#tabs').tabs();
$("#container-2").tabs();
});
</script>
<div id="tabs">
        <ul>
                <li><a href="remote.jsp"><span>Requests</span></a></li>
      </ul>
  </div>

但是我无法在远程页面中获取嵌套的选项卡。

它们是简单的列表形式。

任何帮助

谢谢

普拉杜特

3 回复 | 直到 16 年前

munch 16 年前

你想绑一个 tabs() 到 $('#container-2') 不在那里。您需要在加载选项卡内容之后执行此操作。

$('#tabs').tabs({
   load: function(event, ui){
     $("#container-2").tabs();
   }
});

Pradyut Bhattacharya 16 年前

远程程序本身应该有一个脚本

<script type="text/javascript">

  $(function(){
  $('#tabs-2').tabs();
  });
  </script>

此处的示例URL:

http://pradyut.dyndns.org/WebApplicationSecurity/newtab.jsp

Nathan Taylor 16 年前

只有在加载了tabs()s函数之后,才需要调用容器2上的tabs()s函数。使用远程选项卡时,在打开该选项卡之前不会加载内容,这意味着该选项卡的内容不会同时添加到DOM中$(document.ready()。试试这个:

<script type="text/javascript">
 $(function(){
    $('#tabs').tabs({
     load: function(event, ui) {
        $("#container-2").tabs();
     }
    });
 });
</script>

我还没有测试过它,所以您可能需要修改加载函数内部的代码,以使其正常工作,但无论如何,这应该可以让您开始工作。

推荐文章