jquery - 将同一页面上的 #link 锚定到 Woocommerce jQuery 选项卡

Question

这里有点像 jQuery 新手。

我正在尝试为选项卡设置 anchor 标记，如下所示:

<a href="#tab-ebook_tab">E-books</a>

anchor 标记与选项卡位于同一页面上；我不需要使用 URL 哈希#。

选项卡标记如下。页面加载时显示第一个选项卡 #tab-reviews活跃。

<div class="woocommerce-tabs">
<ul class="tabs">           
        <li class="reviews_tab">
            <a href="#tab-reviews">Reader Comments</a>
        </li>
        <li class="stories_tab_tab">
            <a href="#tab-stories_tab">More Stories</a>
        </li>
        <li class="ebook_tab_tab">
            <a href="#tab-ebook_tab">E-book</a>
        </li>
</ul>
</div>

这是我尝试与 anchor 标记一起使用的函数，用于滚动到并打开 #tab-ebook_tab位置。

jQuery(document).ready(function() {
   jQuery( '#tab-ebook_tab' ).show();
   jQuery( 'li.tab-ebook_tab a' ).trigger('click');
});

但是，它仅在 #tab-ebook_tab 时有效。已经开放；然后 anchor 标记 <a href="#tab-ebook_tab">E-books</a>将触发，页面将向下滚动到 #tab-ebook_tab选项卡。

控制台中没有显示错误。 jQuery v2.0.3 已加载。

这里的其他问题和答案涉及 URL 哈希和页外链接。正在追加#tab-ebook_tab页面 URL 不会打开选项卡或滚动到该页面；但我不需要那个。我只需要从同一页面链接，而不是另一个页面的完整 URL。

Answer 1

页面上似乎有一个 woocomerce 选项卡已初始化且工作正常。现在，您希望在同一页面上有一些链接，将用户带到特定的选项卡，并滚动页面以将选项卡显示在 View 中。如果我误解了这个场景，请告诉我。

解决方案

此解决方案打开电子书选项卡并在 View 中滚动。

HTML:

在页面上的任何位置创建链接，将用户带到特定的 woocomerce 选项卡。该链接将具有特殊的类，并且具有与选项卡中的第一个 anchor (要定向)相同的 href 值。我在这里使用 switchtab 作为 anchor 类:

<a class="switchtab" href="#tab-ebook_tab">Open ebook tab</a>

jQuery:

jQuery(document).ready(function($){
    $("a.switchtab").click(function(e){
        e.preventDefault(); //Prevents hash to be appended at the end of the current URL.
        $("div.woocommerce-tabs>ul.tabs>li>a[href='" + $(this).attr("href") + "']").click(); //Opens up the particular tab
        $('html, body').animate({
            scrollTop: $("div.woocommerce-tabs").offset().top
        }, 1000); //Change to whatever you want, this value is in milliseconds.
    });
});