Question

我正在使用Foundation 4中的嵌套选项卡。当用户被服务器重定向到仪表板上的特定锚点时（例如，#account-email，在他们提交了更新电子邮件表单后），我想要自动加载该部分，而不是强迫他们再次点击进入子部分。

我想出的最好的想法是从location.href抓取锚并迭代嵌套的部分锚点，然后点击每个锚点，无论如何用户都必须这样做。虽然它点击了正确的元素，但它只停留在默认选项卡上（请注意我已将one_up选项设置为false）。

为什么吗

我的jQuery：

$(document).ready( function() {
    $(document).foundation('section');
    var match = /.+(#[\w-]+)$/.exec(location.href);
    if( match[1] ) {
        var anchors = match[1].split('-');
        console.log(anchors);

        var click = '';
        for( var i=0; i<anchors.length; i++ ) {
            // concat each nested section 
            click += ((i>0) ? '-' : '') +anchors[i];
            $('.title a[href="'+click+'"]').click();
            console.log(click+': '+$('.title a[href="'+click+'"]').html());
        }
    }
});

// output:
// ["#account", "email"]
// #account: Account
// #account-email: Email

我的（简化）标记：

<div data-section="auto" data-options="deep_linking: true; one_up: false;" class="section-container auto" style="">
  <div class="section" style="">
    ...first top-level section...
  </div>
  <div class="section active">
    <h2 data-section-title="" class="title"><a href="#account">Account</a></h2>
    <div class="content">
      ...second top-level section: should be displayed for /dashboard#account...
      <div data-section="auto" data-options="deep_linking: true; one_up: false;" class="section-container auto">
        <div class="section active">
          <h3 data-section-title="" class="title"><a href="#account-email">Email</a></h3>
          <div data-section-content="" class="content">
            ...email sub-section: should be displayed for /dashboard#account-email...
          </div>
        </div>
        <div class="section" style="padding-top: 0px;">
          <h3 data-section-title="" class="title"><a href="#account-password">Password</a></h3>
          <div data-section-content="" class="content">
            ...email sub-section: should be displayed for /dashboard#account-password...
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在页面加载时自动选择Foundation 4选项卡

0 个答案: