0

This may be answering my own question, but I'm not sure. I'm using Bootstrap navs to have tabs on a page, with two primary tabs and several more tabs nested within one of those tabs. I want them to be directly linked with a hashtag and for the back button to navigate between them. Direct linking was easy to accomplish, but the back navigation didn't properly work: clicking the back button to go back from the primary tab without nested tabs to a nested tab (from 'Tab One One' to any 'Tab Two [One, Two, Three]' in the code I've shared) would change the hash but not open the desired tab.

I posted about this here, didn't get a reply, and couldn't find other code that would do this, until I found jquery-stickytabs, specifically the fork for nested tabs. It functions just as I would like, but, as coded, the resulting URLs are quite bulky, including the 'data-section' used to direct the 'data-target' (ie "#[data-section='section5']&[data-section='section5.3']"). That library is pretty old, so my query about whether this could be altered went understandably unanswered.

Thus, though I have nothing but the most passing understanding of javascript or jquery, did I fiddle around with it, and I appear to have got it to work as I wanted with simpler URLs. But, for my lack of experience I worry that maybe I've done something that I shouldn't have etc. Or, if not, for anyone else perhaps looking for this functionality I figured that I would share.

I have put the basic code in this codepen. It's coded as I've got it to work live, but the jfiddle doesn't run; perhaps due to the interaction of the href in the code? Or something I've done wrong but don't understand! Hence this question as well. And so I've also included what I changed below.

Thank you!

The only real alterations I made from the original were here, from this:

var showTabFromHash = function (hash) {
            var selector = hash ? 'a[' + settings.selectorAttribute + settings.selectorOperator + '"' + hash.split(settings.fragmentPathSeparator)[0] + '"]' : settings.initialTab;
            $(selector, context).tab('show');
            if (settings.backToTop === true) {
                setTimeout(backToTop, 1);
            }
            else if (hash) {
                var indexOfFirstFragmentPathSeparator = hash.indexOf(settings.fragmentPathSeparator);
                if (indexOfFirstFragmentPathSeparator > 0) {
                    var remainingHash = hash.substring(indexOfFirstFragmentPathSeparator + 1);
                    var element = document.getElementById(remainingHash);
                    if (element) {
                        scrollToElement($(element));
                    }
                    else {
                        showTabFromHash(remainingHash);
                    }
                }
            }
        };

to this:

var showTabFromHash = function (hash) {
            var selector = hash ? 'a[href="#' + hash.split(settings.fragmentPathSeparator)[0] + '"]' : settings.initialTab;
            $(selector, context).tab('show');
            if (settings.backToTop === true) {
                setTimeout(backToTop, 1);
            }
            else if (hash) {
                var indexOfFirstFragmentPathSeparator = hash.indexOf(settings.fragmentPathSeparator);
                if (indexOfFirstFragmentPathSeparator > 0) {
                    var remainingHash = hash.substring(indexOfFirstFragmentPathSeparator + 1);
                    var element = document.getElementById(remainingHash);
                    if (element) {
                        scrollToElement($(element));
                    }
                    else {
                        var selector2 = remainingHash ? 'a[href="#' + hash + '"]' : settings.initialTab;
                        $(selector2, context).tab('show');
                    }
                }
            }
        };

which allowed the nested tab href to go from this:

#[data-section='tabonetwo']&[data-section='tabtwothree']

to this:

#tabonetwo&tabtwothree

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.