1

我是 jQuery/jQuery UI 的新手。我正在尝试在通过 ajax 加载动态内容（temp.html）的页面（sample.html）中创建多个选项卡。所需的效果是 temp.html 中的内容应根据选择的选项卡而变化。我正在使用位置将一些小部件放置在相对于彼此的位置。

我面临的问题是当我单击第一个选项卡时，一切正常。当我点击第二个标签定位不起作用。我在下面添加了我的代码。

示例.html

$(function() {
   $("#tabs").tabs({
    ajaxOptions : {
      error : function(xhr, status, index, anchor) {
           $(anchor.hash).html("Couldn't load this tab.");
        },
        cache : false
        }
    });
});

<div id="content" class="content">
   <div id="tabs">
    <ul>
      <li><a href="temp.html">Tab 1</a></li>
      <li><a href="temp.html">Tab 2</a></li>
    </ul>
   </div>
</div>

临时文件

#widget1 {
 width: 150px;
 height: 70px;
 top: 20px;
 left: 50px
}

#widget2 {
 width: 150px;
 height: 70px;
}

function resetPositions() {
   $("#widget2").position({
    my : "left top",
    at : "right bottom",
    of : "#widget1",
    offset : "0 50"
    });
   }
$(function() {
  $(".customAccordion").draggable();
  $(".customAccordion").accordion({
    collapsible : true,
    fillSpace : false,
    icons : {
     header : "ui-icon-circle-arrow-e",
     headerSelected : "ui-icon-circle-arrow-s"
    }
 });
 resetPositions();
});

<div id="widget1" class="customAccordion">
  <h3><a href="#">Widget 1</a></h3>
  <div>Widget 1</div>   
</div>
<div id="widget2" class="customAccordion">
 <h3><a href="#">Widget 2</a></h3>
 <div>Widget 2</div>
</div>

如果我犯了任何错误，请告诉我。

4

1 回答 1

0

可能是 jQuery UI 的一个棘手部分，您需要确保在选项卡之前初始化手风琴

$(".customAccordion").accordion();
$("#tabs").tabs();
  • 首先尝试移除您的手风琴，看看它是否有帮助。
  • 然后尝试在最后初始化您的选项卡。

然后您需要验证使用 AJAX 加载您的 html 页面将运行其包含的 Javascript...如果没有，您需要将该初始化代码粘贴到选项卡的选择事件中。

$("#tabs").tabs(
{
    select: function(event,ui)
    {
        // initAccordions();
    }
});
于 2012-08-13T16:26:49.600 回答