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>