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