Anchor #link on the same page to a Woocommerce jQuery tab -


Like a jQuery novice here

I am trying to set an anchor tag on a tab, such as:

   

The anchor tag is on the same page as the tab; I do not have to use URL hash #.

The tab markup is down, the page loads with the first tab being # tab-reviews active.

  & lt; Div class = "woocommerce-tabs" & gt; & Lt; Ul class = "tabs" & gt; & Lt; Li class = "review_abab" & gt; & Lt; A href = "#tab-reviews" & gt; Reader Comments & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "stories_tab_tab" & gt; & Lt; A href = "#tab-stories_tab" & gt; More stories & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "ebook_tab_tab" & gt; & Lt; A href = "# tab-ebook_tab" & gt; E-book & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

This is the function that I am trying to use to scroll with the anchor tag and opens the # tab-ebook_tab location.

  jquery (document) .ready (function () {jQuery ('# tab-ebook_tab') Show (); jQuery ('li.tab-ebook_tab a') .trigger (' Click ');});  

However, this only works when # tab-ebook_tab is already open; Then anchor tag and and the page will scroll down to the # tab-ebook_tab tab.

There is no error in the console JQuery v2.0.3 is loaded.

Here is another question and answer that is a slew deal with URL hash and off-page links. The tab does not open or scroll on the Adding # tab-ebook_tab page URL; But I do not need it, I only need to link to one page, no full URL from second page.

It appears that there is a startup tab on your page and working properly is. Now you want some links on the same page which takes the user to a special tab and scrolls the page to bring the tab into view. I know, if I misunderstood the scenario.

Solution

This solution opens the eBook tab and scrolls it up.

HTML:

Create a link anywhere on the page that takes the user to a particular woocomerce tab. This link will have a special class and the same anch price will be the first anchor of the tab (to be directed). I am using the switch tab as an anchor class here:

  & lt; A class = "switchtab" href = "# tab-ebook_tab" & gt; Open eBook tab & lt; / A & gt;  

jQuery:

  jQuery (document) .ready (function ($) {$ ("a.switchtab") .click (function (e) {e.preventDefault (); // The hash must be added at the end of the current URL. $ ("Div.woocommerce-tabs> ul.tabs> li> A [ Href = '"+ $ (This) .attr (" href ") +"'] "). Click (); // Special tab opens $ ('html, body'). Animate ({scrollTop: $ ("Div.woocommerce -tabs"). Offset (). Top}, 1000); // Change to whatever you want, this value is in milliseconds.});});  

Comments

Popular posts from this blog

Member with no value in F# -

java - Joda Time Interval Not returning what I expect -

c# - Showing a SelectedItem's Property -