How can I make links to the different tabs I use?

  • Hello,

    on our website https://www.tiptopsailing.nl we use a lot of tabs to make the enormous amount of information we have to share not only divided to a lot of different pages but also on those pages with tabs.
    To make it easier for specific searches and returning visitors to get to the page with the exact information I would like to be able to link to the information located on the specific Tab. In short, I want to be able to use a link that opens the specific Tab and not simply the first Tab of that page.
    For example this page I want to be able to link directly to our “specials” Tab from for example our homepage pictures.

    As far as I have been able to find the Tab functionality is something native to WP and not a plugin (at least I can’t find a plugin that says that it handles them).

    I also diligently tried to find any answers to my question in the forum and web, amongst other things I found that the use of a # with the url of the Tab (that a right click shows), should fix things.
    However that post was from about three years ago and doesn’t seem to work for us.

    Anyone who knows how to fix this issue? Either without or with a plugin? I’d be happy to buy a plugin that makes this work as it’s an important feature to focus attention on the content we think is most important.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

  • you can do it with a little javascript 

    var gotoHashTab = function (customHash) {
        var hash = customHash || location.hash;
        var hashPieces = hash.split('?'),
            activeTab = $('[href=' + hashPieces[0] + ']');
        activeTab && activeTab.tab('show');
    }

    // onready go to the tab requested in the page hash
    gotoHashTab();

    // when the nav item is selected update the page hash
    $('.nav a').on('shown', function (e) {
        window.location.hash = e.target.hash;
    })

    // when a link within a tab is clicked, go to the tab requested
    $('.tab-pane a').click(function (event) {
        if (event.target.hash) {
            gotoHashTab(event.target.hash);
        }
    });

    and where you call your link you must add something like this

    <a href="" id="example"> example</a>

    Thread Starter TipTopSailing

    (@tiptopsailing)

    Dear Zota Marius,

    thanks for your reply. I’ll check to see if my colleague knows a bit about this, unfortunately JS is a bit above my it level ??

    Thread Starter TipTopSailing

    (@tiptopsailing)

    Dear Zota,

    unfortunately our webbuilder isn’t too experienced in JS either. She tried something as above but didn’t succeed entirely.

    She pasted an example link. Could you take a look if you spot any mistakes?

    https://www.tiptopsailing.nl/zeilvakanties/griekenland/corfu-test/ => “example link”

    Thanks!

    Hello,
    so your link must open “Vertrekdata” tab from page corfu…
    you used javascript in the page where the information is displayed,
    should be used also in the execution part … in that link that call your page. “example page”

    1. in the example link you don`t have any javascript event?
    2. your “Vertrekdata” tab don`t have an id, so how to find wich one is it ?
    ex. your tab is now like this :
    <a class="selected" href="#tab-1416481036723-9-9">Vertrekdata</a>

    you must have something like this
    <a class="selected" href="#tab-1416481036723-9-9" id="tab-1416481036723-9-9">Vertrekdata</a>

    and the javascript event that is now on “Vertrekdata” tab must be used also in example link page … see photoevent javascript in wrong element

    p.s. its hard for me to find exactly where is the problem because i dont know your language and your website don`t have english version.

    You can read more here

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How can I make links to the different tabs I use?’ is closed to new replies.

Tags