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

远程jquery嵌套选项卡

nested tabs jquery

Pradyut Bhattacharya · 技术社区 · 15 年前

我在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 回复 | 直到 15 年前

munch 15 年前

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

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

Pradyut Bhattacharya 15 年前

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

<script type="text/javascript">

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

此处的示例URL:

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

Nathan Taylor 15 年前

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

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

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前