Question

这里有一个jQuery新手。

我正在尝试为标签设置锚标记，如下所示：

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

锚标记与标签位于同一页面上;我不需要使用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>

这是我尝试使用锚标记滚动并打开#tab-ebook_tab位置的功能。

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

但是，它仅在#tab-ebook_tab已经打开时才有效;然后锚点标记<a href="#tab-ebook_tab">E-books</a>将会触发，页面将向下滚动到#tab-ebook_tab标签。

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

SO中的其他问题和答案处理URL哈希和离页链接。将#tab-ebook_tab附加到页面URL不会打开选项卡或滚动到它;但我不需要那个。我只需要从同一页面链接，而不是从另一个页面链接完整的URL。

Answer 1

看起来你已经初始化并正常工作的页面上有一个woocomerce选项卡。现在，您希望在同一页面上有一些链接，用户可以将用户带到特定选项卡，还可以滚动页面以将选项卡显示在视图中。如果我误解了这种情况，请告诉我。

<强>解决方案

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

HTML：

在页面的任意位置创建链接，将用户带到特定的woocomerce选项卡。此链接将具有一个特殊类，并且具有与选项卡（待定向）中的第一个锚具有相同的href值。我在这里使用switchtab作为锚类：

<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.
    });
});

Answer 2

有点难以理解究竟需要什么。但下面是jQuery代码，我相信这是你问题的答案。

jQuery(document).ready(function () {
    jQuery('.ebook_tab_tab').on('click', function () {
        jQuery('#tab-ebook_tab').trigger('click');
        jQuery('#tab-ebook_tab').attr('style', 'display:block;');
        jQuery('#tab-reviews').attr('style', 'display:none;');

    });

});

这里也是我玩过的JSFiddle。我希望这是一个起点!!

Answer 3

不确定你在这里问的是什么，这是你在JSFiddle之后的那种功能

//animate to ebooks and show ebook content
   $('html, body').animate({
       scrollTop: $("#id-tab-ebook_tab").offset().top
   }, 1000, function () {
       console.log("Animating");
   }).promise().done($('#id-tab-ebook_tab').trigger('click'));

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

3 个答案: