Is it possible to add links to bootstrap 4 nav-pills tab-panel from a different page?

Question

I have a service page that using bootstrap 4's pills .nav-pills navigation (this is not the main navigation navbar), which is working very well. My challenge is that i want to be able to click on a link on the home page that should open the targeted tab-panel on the service page. Haven't been able to find a way for almost a week now. How can i achieve this?

Service.html

<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<ul class="list-group list-unstyled">
    <li class="nav-item">
        <a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Supply</a>
    </li>
</ul>
</div>

<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
    <h5>Man Power Supply</h5>
</div>

Home.html

<a href="services.html#v-pills-manpower" data-toggle="tab" >

My code in home.html doesn't work but that's one of my many attempts.

Answer 1

On the home page, configure data attributes to help. I've added data-tab-name to the anchor and it defines the desired, selected tab for the service page.

When the page loads, it re-configures the onclick of the link so that the tab name can be stored in localStorage before redirecting the user to the service page.

Home.html

<a href="services.html" data-tab-name="v-pills-manpower" data-toggle="tab" >

    <script type="text/javascript">
    window.onload = function() {
        document.querySelectorAll('[data-toggle="tab"]').forEach(function(item, index){
            item.addEventListener('click', function(e){
                e.preventDefault();
                localStorage.selectedTabName = item.getAttribute('data-tab-name');
                window.location.href = item.href;
            });
        });
    };
</script>

When the service page loads, the javascript looks for the saved tab name in localStorage, identifies that tab and then makes it the active tab by applying the "active" class to the appropriate element.

Service.html

<script type="text/javascript">

    window.onload = function() {

        document.querySelectorAll('.nav-link').forEach(function(item, index){
            var isActive = (item.className.indexOf('active')>-1);
            if (item.id==localStorage.selectedTabName) {
                if (!isActive) {
                    item.className += ' active';
                }
                item.setAttribute('aria-selected', 'true');
            } else  {
                item.setAttribute('aria-selected', 'false');
                if (isActive) {
                    item.className = item.className.replace('active', '');
                }
            }
        });

    };

</script>