bootstrap3tabを切り替えながらページ内移動

2015年11月25日更新 view: 152 view
http://coliss.com/wp-content/uploads-201302/2013080701-01.png

タブを切り替えた瞬間、ページトップに移動させたい

外部要素からタブを切り替えた場合にトップに飛びたい。
どうすればいいの?

・.spacer内のaタグをクリックしたら
・.nav-tabsのactiveを全て解除
・対応する .nav-tabs の上のliに active を付与
・ページトップへ移動

スポンサードリンク

という流れで対応します。

<script>
$(function () {


$('.spacer a').on('click', function(e) {
//navtabsの選択状態をすべて解除し、その後選択された要素を 選択済みにする
$(".nav-tabs li").removeClass("active");
$(".nav-tabs [href='" + $(this).attr("href") + "']").first().parent().addClass("active");
//トップに戻る
var off = $('body').offset();
$('html,body').animate({scrollTop: off.top, scrollLeft: off.left}, 100);
});

});
</script>

つづいてタブメニュー

<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">タブメニュー1</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#messages" data-toggle="tab">タブメニュー3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">ああああああああああ</div>
<div class="tab-pane" id="profile">いいいいいいいいいい</div>
<div class="tab-pane" id="messages">ううううううううううう</div>
</div>

ページ下部のタブ切り替え

<div class="spacer">


<a href="#profile" data-toggle="tab" class="btn btn-primary btn-block btn-lg" type="button"> 2 記事を作成しよう</a>

</div>

これで動く。

スポンサードリンク

関連記事

関連カテゴリ