jquery - JQuery のタブ付きコンテンツ内のアンカーへのリンク

Question

私の例[ここ]を見つけることができます 。タブはうまく機能していますが、その追加機能が必要なだけです。

<a name="test"></a>「スタッフ」タブ内のヘッダー「アンカー」の横にあります。

デフォルトでは最初のタブが選択されていますが、誰かがリンクをクリックする<a href="#test">Go to anchor</a>と、3 番目のタブに移動し、下にスクロールしたいと思います<a name="test"></a>。

Answer 1

どのタブに移動するかがわかるように、アンカータグにgoto属性が追加された変更はほとんどありません。

<a href="#test" goto="stuff">

stuffタブ内のアンカータグに移動するために、以下のコードを追加しました

$('html, body').animate({
   scrollTop: x // where a tag is 
});

デモ

更新：デモの仕組み

デモには、3つのタブとコンテンツがあります。最初のタブコンテンツには、タブ「スタッフ」へのリンクがあります。このリンクをクリックすると、タブが変更され、タブ「スタッフ」の内容が表示されます。タブを変更するためのリンクは次のようになります<a href="#test" goto="stuff">switch to Tab Stuff</a> 。gotoの値は、タブのハッシュタグと同じ値である必要があります<li><a href="#stuff">Stuff</a></li>。以下の関数は、属性'goto'の値を取得し、その値をに入れて、var whereTo一致するセレクターをクリックします。'a[href=#' + whereTo + ']'

$('a').not('.tabs li a').on('click', function(evt) {
    evt.preventDefault();
    var whereTo = $(this).attr('goto');
    $tabs = $("ul.tabs li");
    $tabs.find('a[href=#' + whereTo + ']').trigger('click');
    // code shortened to keep explanation simple
}

お役に立てれば