TABS & Linking Externally - SEO & Linkjuice

Bootstrap Studio Help
1

Currently the Horizontal TABs organize the content quite nicely. In the Browser they appear to have an external link in this form: URL: http://www.yourwebsite.com/#tab-7 when the cursor is hovered over the tab. However using this as a URL does not bring the that Tab-7 up.

I would like to know if there is a way to make this happen, and a way to change the "tab-4" designation to the actual alphanumeric title. It would be useful for making links within the site, and it would allow robots to find the key organizational structure automatically for the purpose of SEO.

We are moving from a web page design which had a separate page for each TAB, which the robots found and catalogued, now I am afraid they are going to be lost!

Perhaps I should restructure the website back to the old approach?

https://www.mysticseacaptain.com

2

To change tabs you need to update the IDs to be what you want.

But.... this could screw with the js out of the box from bs

3

Ok, here's your answer

You add this JS code as it's own JS file would probably be easier, I named my as stickytabs.js

/**
 * jQuery Plugin: Sticky Tabs
 *
 * @author Aidan Lister <aidan@php.net>
 * @version 1.2.0
 */
(function ( $ ) {
    $.fn.stickyTabs = function( options ) {
        var context = this

        var settings = $.extend({
            getHashCallback: function(hash, btn) { return hash }
        }, options );

        // Show the tab corresponding with the hash in the URL, or the first tab.
        var showTabFromHash = function() {
          var hash = window.location.hash;
          var selector = hash ? 'a[href="' + hash + '"]' : 'li.active > a';
          $(selector, context).tab('show');
        }

        // We use pushState if it's available so the page won't jump, otherwise a shim.
        var changeHash = function(hash) {
          if (history && history.pushState) {
            history.pushState(null, null, '#' + hash);
          } else {
            scrollV = document.body.scrollTop;
            scrollH = document.body.scrollLeft;
            window.location.hash = hash;
            document.body.scrollTop = scrollV;
            document.body.scrollLeft = scrollH;
          }
        }

        // Set the correct tab when the page loads
        showTabFromHash(context)

        // Set the correct tab when a user uses their back/forward button
        $(window).on('hashchange', showTabFromHash);

        // Change the URL when tabs are clicked
        $('a', context).on('click', function(e) {
          var hash = this.href.split('#')[1];
          var adjustedhash = settings.getHashCallback(hash, this);
          changeHash(adjustedhash);
        });

        return this;
    };
}( jQuery ));

Then add the following class nav-tabs-sticky to the DIV just above the UL with the class nav-tabs

Then add this JS code to "your" JS file that needs to come after all the other JS files hint hint

$(function(){
    $(".nav-tabs-sticky").stickyTabs();
});

That is how I got mine to work, I have not found a CDN of the stickytabs JS file or I'd use that myself.

.........

Can you rename your #tab-1 etc.. URL and ID references, yes you can. I don't know how you had problems last time, it has nothing to do with the JS code for tabs. You just have to be sure that you're changing both the URL and the corresponding ID in the .tab-content section correctly. In the URL (Options pane) you put in #home in the ID you put in home. For "Activities" you put in the URL (Options pane) #activities, in the corresponding ID in the .tab-content section you put in activities etc.. etc..

Saj

4

Saj, This is great. I think I am going to Duplicate the entire index page and give it a try. I'll let you know how it goes. Thank you once again! Rick

5

Saj, This has worked! In test mode, I can enter a url in the browser for an internal link like this http://192.168.1.51:63326/#photos or http://192.168.1.51:63326/#activities

I think the problem before was due to the fact thatn BSS did not recognize my override of the ID from the ATTRIBUTE panel or my changing the Link or URL by defining a new href. The new version now has both the URL and the ID in either the attribute or Options which is much better.

Ok now it is working to the BSS test website http://crimson-paper-3666.bss.design/#inquire

Thank you Saj, StickyTabs is working!

I think this should become a permanent feature of TABS navigation!

6

Saj,

I am going to upload this to the website, but before I do, I'd like to move the stickytab.js into my custom.js file. To keep the optimized pagespeed faster (one less document to upload). Would there be any problem with that?

Thanks. Rick

7

I just realized something about how BSS works.

I have two js files "other.js" (all the earlier user js code is in this file) and "stickytabs.js" When I export the website all the js code in both files is exported to "script.js" and minimized when I have that option selected.

Also I have moved all my css into a "custom.css" file, if I had another file with css in it, I believe when I export the website, BSS will create a new file called "style.css" or styles-min.css" which contains all the css from both files.

All [user].css files are joined & exported to "styles.css" or "styles-min.css" All [user].js files are joined & exported to "script.js" or "script-min.js"

Is this correct?

Then the only files needed to upload to the website are the two files. They are combined automatically by BSS when exported.

8

I believe that is correct.

Saj

9

Hi All

Is Saj’s answer still the only way to get this to work or is there new functionality to allow a link to open tab sheet?

TIA
SMG

10

SMG It’s been awhile since I’ve used Bootstrap Studio, and I do need to update the website., so I don’t have an answer for you. Perhaps someone else will.

11

@SMG

You can do it like this in vanilla javascript

HTML markup

<ul class="nav nav-tabs" role="tablist">
	<li class="nav-item" role="presentation"><a class="nav-link active" role="tab" data-bs-toggle="tab" id="trigger-1" href="#tab-1">Tab 1</a></li>
	<li class="nav-item" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" id="trigger-2" href="#tab-2">Tab 2</a></li>
	<li class="nav-item" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" id="trigger-3" href="#tab-3">Tab 3</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" role="tabpanel" id="tab-1">
		<p>Content for tab 1.</p>
	</div>
	<div class="tab-pane" role="tabpanel" id="tab-2">
		<p>Content for tab 2.</p>
	</div>
	<div class="tab-pane" role="tabpanel" id="tab-3">
		<p>Content for tab 3.</p>
	</div>
</div>

Javascript

(function() {
	'use strict';
	
    function locationHashChanged() {
        if (location.hash === '#tab-1') document.getElementById('trigger-1').click();
		if (location.hash === '#tab-2') document.getElementById('trigger-2').click();
		if (location.hash === '#tab-3') document.getElementById('trigger-3').click();
	}

	window.addEventListener('hashchange', locationHashChanged);
	window.addEventListener('load', locationHashChanged);
    
})();
12

an example

13

Thanks for you replies, I have managed to get it to work with Saj’s code

But if I minify on export it stops working. I have added the below js function to a new second file as I can’t work out which file it should be added to.

Please can someone pont out the obvious.

I don’t know what Saj means by

" Then add this JS code to “your” JS file that needs to come after all the other JS files hint hint "

$(function(){
    $(".nav-tabs-sticky").stickyTabs();
});


TIA
SMG