Foundation 6 Tabs by URL anchor link / deep_linking

If you are trying to use the Foundation 6 (Foundation for Sites) Tabs with deep_linking: true, as it says in the documentation, you are in for a bad surprise.

Foundation 6 Tab deep-linking is not yet supported.

As a workaround, I have put up a little bit of Javascript to be used to deeplink to the tabs by the URL anchor hash.

Even Zurb Foundation has sent people to my page to use this workaround until they fix it :)

I have put this up on Github as well so you can make it better :)

/*
 * Deep linking for Foundation 6 Tabs using Javascript
 *
 * We will check if we have a hash in the page url and if so, use it.
 *
 * By Christian Haensel
 * chris@chaensel.de
 * www.chaensel.de
 * @author     Christian Hänsel <chris@chaensel.de>
 * @copyright  Copyright (c) 2016 by Christian Hänsel
 * @license    https://opensource.org/licenses/MIT MIT License
 */
if(window.location.hash) {
    // We have an anchor link in our URL
    var f6dl_url = window.location.hash;
    var f6dl_hash = f6dl_url.substring(f6dl_url.indexOf("#")+1);
    if($('#'+f6dl_hash).length) {
        // Insert id of the <ul> that holds the links to the tabs
        var f6dl_ulid = 'account-tabs';
        $('#' + f6dl_ulid).find('a').each(function(e) {
            var f6dl_href = $(this).attr('href');
            if(f6dl_href == "#"+f6dl_hash) {
                // Click the link to activate the tab
                $(this).click();
            }
        });

    }
}

 

Veröffentlicht von

Christian Hänsel

Web-Entwickler, Experte für technisches SEO. ich liebe meinen Job, meine Familie und den Libanon. Fragen? Mail: chris@haensel.pro.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.