Click <a> tag from a URL #?

Question

I'm using some HTML and JS on a Shopify page to allow users to click between tabs in a list - hiding and displaying the correct data based on which link is clicked. Tab1 is loaded as default.

I'm wondering if it's possible to add a hashtag into the URL to preload the ID of the tab i'd like loaded. eg: webpage.com/page1#tab4 to load the page straight to tab 4 tag.

Have done a fair bit of digging but can't seem to figure out a way to do this. Would really appreciate a pointer in the right direction!

Have added the page code below.

Thanks all!

{% for block in section.blocks %}
{% assign page_1 = block.settings.page_handle_one %}
{% assign page_2 = block.settings.page_handle_two %}
{% assign page_3 = block.settings.page_handle_three %}
{% assign page_4 = block.settings.page_handle_four %}
{% assign page_5 = block.settings.page_handle_five %}
{% assign page_6 = block.settings.page_handle_six %}
{% endfor %}
<div class="main_inner_page">
    <div class="main_top_header tabs">
        <ul class="tab-links responsives desktop_tab_view">
            {% for block in section.blocks %}
            <li><a id="tab1" href="#tab1">{{ block.settings.page_title_one }}</a></li>
            <li><a id="tab2" href="#tab2">{{ block.settings.page_title_two }}</a></li>
            <li><a id="tab3" href="#tab3">{{ block.settings.page_title_three }}</a></li>
            <li><a id="tab4" href="#tab4">{{ block.settings.page_title_four }}</a></li>
            <li><a id="tab5" href="#tab5">{{ block.settings.page_title_five }}</a></li>
            <li><a id="tab6" href="#tab6">{{ block.settings.page_title_six }}</a></li>
            {% endfor %}
        </ul>
        <div class=" storeSelecWrap j-store-select selWrap mobile_tab_view">
            <div class="s-dropdown--styled tabs">
                {% for block in section.blocks %}
                <span class="fa fa-angle-down store-default">{{ block.settings.page_title_one }}</span>
                {% endfor %}
                <ul class="s-dropdown u-hide tab-links">
                    {% for block in section.blocks %}
                    <li class="active j-store"><a href="#tab1">{{ block.settings.page_title_one }}</a></li>
                    <li class=" j-store"><a href="#tab2">{{ block.settings.page_title_two }}</a></li>
                    <li class=" j-store"><a href="#tab3">{{ block.settings.page_title_three }}</a></li>
                    <li class=" j-store"><a href="#tab4">{{ block.settings.page_title_four }}</a></li>
                    <li class=" j-store"><a href="#tab5">{{ block.settings.page_title_five }}</a></li>
                    <li class=" j-store"><a href="#tab6">{{ block.settings.page_title_six }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="tab-content">
    <div class="page_one_main common_page tab active" id="tab1">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_one | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="content">
            <div class="inner {{ settings.content_layout }}">
                <div id="rte">
                    {% for block in section.blocks %}
                    <h2>{{ block.settings.page_title_one }}</h2>
                    {% endfor %}
                    {{ pages[page_1].content }}
                </div>
            </div>
        </div>
    </div>
    <div class="page_two_main common_page tab" id="tab2" style="display:none;">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_two | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="content">
            <div class="inner {{ settings.content_layout }}">
                <div id="rte">
                    {% for block in section.blocks %}
                    <h2>{{ block.settings.page_title_two }}</h2>
                    {% endfor %}
                    {{ pages[page_2].content }}
                </div>
            </div>
        </div>
    </div>
    <div class="page_three_main common_page tab" id="tab3">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_three | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="third_section">
            <div class="content">
                <div class="inner {{ settings.content_layout }}">
                    <div id="rte">
                        {% for block in section.blocks %}
                        <h2>{{ block.settings.page_title_three }}</h2>
                        {% endfor %}
                        {{ pages[page_3].content }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page_four_main common_page tab" id="tab4">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_four | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="content">
            <div class="inner {{ settings.content_layout }}">
                <div id="rte">
                    {% for block in section.blocks %}
                    <h2>{{ block.settings.page_title_four }}</h2>
                    {% endfor %}
                    {{ pages[page_4].content }}
                </div>
            </div>
        </div>
    </div>
    <div class="page_five_main common_page tab" id="tab5">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_five | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="content">
            <div class="inner {{ settings.content_layout }}">
                <div id="rte">
                    {% for block in section.blocks %}
                    <h2>{{ block.settings.page_title_five }}</h2>
                    {% endfor %}
                    {{ pages[page_5].content }}
                </div>
            </div>
        </div>
    </div>
    <div class="page_six_main common_page tab" id="tab6">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_six | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="content">
            <div class="inner {{ settings.content_layout }}">
                <div id="rte">
                    {% for block in section.blocks %}
                    <h2>{{ block.settings.page_title_six }}</h2>
                    {% endfor %}
                    {{ pages[page_6].content }}
                </div>
            </div>
        </div>
    </div>
</div>
<script>
// $(window).scroll(function() {    
//     var scroll = $(window).scrollTop();
//     if (scroll >= 100) {
//         $(".main_inner_page").addClass("HeaderSticky");
//     } else {
//         $(".main_inner_page").removeClass("HeaderSticky");
//     }
// });  
function setTabActive(el) {
  el.show().addClass('active')
    .siblings().removeClass('active').hide();
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
  e.preventDefault();
};



$(document).ready(function() {

      const hash = window.location.hash
      if (hash && hash.startsWith('#tab')) {
        setTabActive($(hash))
      }

    $('.tab-links a').on('click', event => setTabActive(event.target));

    $(".faq").accordion({
        questionClass: '.header',
        answerClass: '.content_faq',
        itemClass: '.faqitem'
    });

    $('.responsive').slick({
        centerMode: false,
        centerPadding: '60px',
        slidesToShow: 5,
        responsive: [{
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '90px',
                    slidesToShow: 1,
                    swipe: true,
                    swipeToSlide: true
                }
            }
        ]
    });

    $(document).on('click', '.j-store-select', function(e) {
        e.preventDefault();
        $(this).find('ul').slideToggle();
    });

    $(document).on('click', '.j-store', function(e) {
        e.preventDefault();

        var store = $(this).html();

        $(this).toggleClass('selected');
        $('.j-store').not($(this)).removeClass('selected');
        $('.store-default').html(store).css('color', 'black');
        $('#competitor').val($(this).attr('data-value'));

    });
});
</script>

Answer 1

The easiest approach would be to check the window.location.hash value on page load (I'd recommend right in your $(document).ready()) and do your tab-selection logic there.

Move your toggling logic into a separate function and call it from both the initial hash check and the on tab click event.

const hash = window.location.hash
if (hash && hash.startsWith('#tab')) {
  setTabActive(hash.substring(1))
}

$('.tab-links a').on('click', event => {
  setTabActive(event.target.id);
  event.preventDefault();
});

function setTabActive(tabId) {
  const el = $(tabId)
  el.show().addClass('active')
    .siblings().removeClass('active').hide();
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
});

Also note, that you're missing the ID in your tab1 element. You could remove the default active from tab1 as well.