jQuery ui-tabs 在页面加载后加载

发布于 2024-10-11 19:56:36 字数 918 浏览 6 评论 0原文

我需要在 DOM 加载后创建一些选项卡。我使用 jQuery 的附加创建必要的标记,然后创建选项卡,但它们不起作用。按应有的方式应用样式,显示选项卡,但所有选项卡内容都会立即显示,并且单击时选项卡不执行任何操作。选项卡是否必须以某种特定方式初始化?

代码如下:

$(".edit-element").livequery(function() {
      $(".edit-element").click(
              function() {

                  //alert("Clicked");
                var id=$(this).parent().attr('id');
                 $(this).parent().append("<div id=\""+id+"_tabs\"><ul>
<li><a href=\""+id+"_tab0\">Nunc tincidunt</a></li>
<li><a href=\""+id+"_tab1\">Nunc tincidunt</a></li></ul>
<div id=\""+id+"_tab0\">Proin elit</div>
<div id=\""+id+"_tab1\">Proin elit arcu, rutrum commodo</div></div>");
$(this).remove();
$("#"+id+"_tabs").tabs();       
              }
           );

    });

livequery() 就在那里,因为我通过 Ajax 远程加载这些元素。

I need to create some tabs after the DOM has loaded. I create the neccessary markup using jQuery's append, and then create the tabs, but they are not working. The style is applied as it should, the tabs are shown, but all of the tab content is displayed immediately, and the tabs do nothing, when clicked upon. Do the tabs have to be initialized in some specific way?

Here's the code:

$(".edit-element").livequery(function() {
      $(".edit-element").click(
              function() {

                  //alert("Clicked");
                var id=$(this).parent().attr('id');
                 $(this).parent().append("<div id=\""+id+"_tabs\"><ul>
<li><a href=\""+id+"_tab0\">Nunc tincidunt</a></li>
<li><a href=\""+id+"_tab1\">Nunc tincidunt</a></li></ul>
<div id=\""+id+"_tab0\">Proin elit</div>
<div id=\""+id+"_tab1\">Proin elit arcu, rutrum commodo</div></div>");
$(this).remove();
$("#"+id+"_tabs").tabs();       
              }
           );

    });

The livequery() is there, because I'm loading those elements remotely, via Ajax.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

如果没有你 2024-10-18 19:56:36

我自己找到了答案。

我忘记了链接中 div 名称之前的 # 符号。所以,

<li><a href=\""+id+"_tab0\">Nunc tincidunt</a></li>

它应该就

<li><a href=\"#"+id+"_tab0\">Nunc tincidunt</a></li>

这么简单。

感谢所有提供帮助的人!

I found the answer myself.

I had forgotten the # sign before the div name in the link i have. So, instead of

<li><a href=\""+id+"_tab0\">Nunc tincidunt</a></li>

it should have been

<li><a href=\"#"+id+"_tab0\">Nunc tincidunt</a></li>

As simple as that.

Thanks for everyone that provided help!

腹黑女流氓 2024-10-18 19:56:36

您的选项卡可能无法工作,因为您正在为该页面上已存在的选项卡指定 id。页面上的 id 应始终是唯一的(即,您不能在同一页面上多次使用相同的 id)

下面的两行代码表明您正在为选项卡分配与其父级相同的 id,因此它可能无法按预期工作当点击时。

 var id=$(this).parent().attr('id');
 $(this).parent().append("<div id=\""+id+"_tabs\"><ul>

Your tabs might not work because you are asigining id to tabs which already exists on that page. The id on the page should always be unique (ie you cannot use same id more then once on same page)

The below two code lines of yours indicate that you are assigning the tabs same id as it's parent and hence it might not work as expected when clicked.

 var id=$(this).parent().attr('id');
 $(this).parent().append("<div id=\""+id+"_tabs\"><ul>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文