jquery - 外部リンクからタブ付きコンテンツ内にアンカーするためのリンク

Question

外部リンク からタブ付きコンテンツ内のアンカーへのリンクアンカーに移動します。スクリプトは、すべてのページ/テンプレートにわたってグローバルファイルとして追加する必要があります。私が持っているものの例なので、これまでに持っています。

<a goto="stuff" href="#test">Go to stuff</a>/をクリックします。これは3番目のタブに移動します。

score 0 · Accepted Answer

問題は、$（window.location.hash）が$（'＃test'）と評価されるため、ID="test"の要素を探すことです。そのような要素はあなたのページには存在しません。

次のようなリンクを使用します。

通常、anchor name="test"でマークされたコンテンツに移動することを示します。

あなたの例では、同じ名前の属性を持つ少なくとも2つのアンカーを見ることができます。

<a name="test"></a>

これは間違っています-アンカー名は一意である必要があります：

したがって、これを修正して一意のアンカー名を付けると、goto属性の代わりにhrefを使用できるようになります。名前とIDの両方を使用することもお勧めします：

<a id="test" name="test"></a>

これにより、$（window.location.hash）が期待どおりに機能します。

これで、正しいタブがアクティブになります。

var $targetAnchor = $(window.location.hash);
tabId = $targetAnchor.closest('.tab-content').attr('id');
$tabs.find('a[href=#' + tabId + ']').click();

そして、これはスクロールで機能するはずです：

$('html, body').animate({
    scrollTop: $targetAnchor.offset().top
});

1 に答える 1