Question

我是jQuery / jQuery UI的新手。我试图在页面（sample.html）中创建多个选项卡，通过ajax加载动态内容（temp.html）。期望的效果是temp.html中的内容应根据所选的标签进行更改。我正在使用position将一些小部件放在相对于彼此的位置。

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

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

temp.html

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

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

Answer 1

可能是jQuery UI的棘手部分，您需要确保 >

$(".customAccordion").accordion();
$("#tabs").tabs();

首先尝试移除你的手风琴，看它是否有帮助。

然后尝试在最后初始化标签。

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

$("#tabs").tabs( { select: function(event,ui) { // initAccordions(); } });

jQuery UI通过ajax position（）选项卡内容仅适用于第一个选项卡

1 个答案: