1

我在 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>
4

0 回答 0