jQuery UI 选项卡 - 2 个问题

Question

我正在使用 jQuery 选项卡，但遇到了一些问题。让我在这里为您详细介绍它们，然后我将在下面放置代码：

问题 1：

我总共有 6 个选项卡（本地 div 中的默认选项卡，其他 5 个通过 Ajax 加载）。当页面加载时，我需要默认选择第三个选项卡。简单的。问题是，假设我链接到http://example.com/index.html#services，第三个选项卡仍然显示，而不是服务选项卡。

我尝试使用 cookie 设置选定的值，但它无法正常工作。

问题 2：

这是主要的，我似乎无法弄清楚。第三个选项卡是默认数据，如果我单击该选项卡右侧的选项卡并返回，一切都是金色的。但是...如果我单击第三个选项卡左侧的一个选项卡（默认左侧或右侧的所有选项卡都是通过 Ajax 加载的），然后单击返回到第三个选项卡，面板完全消失并且它是空白的。然后，单击不同的选项卡不仅会使第三个选项卡处于选定状态（不仅仅是选项卡本身的内容），而且选定的选项卡也会显示为选定状态。

我竭尽全力想弄清楚这里到底发生了什么。我今天会在路上，但会尽可能检查。希望你们中的一个可以帮助我解决这个问题。

好的...这是我的 jquery 中的代码

$(document).ready(function() {
          //build tabs
          $("#tabs").tabs( { 
              cookie: { expires : 30 },
              load: function(ui) {
                  //initilize accordion
                  $("#accordion").accordion( { active: 2 } );
              },
              show: function(event, ui) {
                  //initialize accordion
                  $("#accordion").accordion( { active : 2 } );
                  //cookie select
                  var cookie = $("#tabs").tabs("option", "cookie");
                  /*
                  if(cookie) {
                      $("#tabs").tabs("select", $.cookie('ui-tabs-1'));
                  } else {
                      $("#tabs").tabs("select", 2);
                  }
                  */
              },
              ajaxOptions: {
                  dataFilter: function(data, dataType) {
                      return $(data).find("#content_area");
                  }
              }
          } ); 

      });

这是我的标签中的代码：

<div id="tabs">
    <ul>
       <li><a href="home.html" title="home">Home</a></li>
       <li><a href="services.html" title="services">Services</a></li>
       <li><a href="#content_area">Company</a></li>
       <li><a href="employee.html" title="employee">Employee</a></li>
       <li><a href="work-tools.html" title="work_tools">Work Tools</a></li>
       <li><a href="contact.html" title="contact">Contact</a></li>
    </ul>

    <div id="content_area">
       <p>CONTENT HERE</p>
    </div>
    <!-- end #content_area -->

衷心感谢您的帮助。

Answer 1

好的...想通了！朝着一个全新的方向前进，实际上结果更好，因为我可以使用标签和后退按钮来更改自定义地址栏。

我强烈推荐jQuery Address plugin，因为我用它来解决我的问题。我不得不对选项卡中的手风琴进行一些调整，因为 autoHeight 不起作用，但通过检查手风琴 div 的 height() 并设置 changestart 来解决这个问题。