Elementor 手風琴分頁連結

加入JS語法

<script>
jQuery(document).ready(function ($) {
    //get the hash tag
    //hash exist
    setTimeout(function () {
        var current = window.location.href
        var current = current.split('#tab')
        if (current.length > 1) {
            showAndScrollToTab($, current)
        }
    }, 200);
    // change the browser url according to selected tab
    $('.elementor-tab-title[data-tab]').click(function () {
        var current_location = window.location.href;
        current_location = current_location.split('#')
        window.location = current_location[0] + '#tab' + $(this).attr('data-tab')
    })
    // activate tab also from anchor link in the same page
    $('a').on('click', function () {
        var anchorUrl = $(this).attr('href')
        var anchor = anchorUrl.split('#tab')
        if (anchor.length > 1) {
            showAndScrollToTab($, anchor)
        }
    })
})

function showAndScrollToTab($, current) {
    $('.elementor-tab-title[data-tab="' + current[1] + '"]').click();
    // scroll to
    var headerHeight = $('#header').height()  // put here your header id to get its height.
    $([document.documentElement, document.body]).animate({
        scrollTop: $('.elementor-tab-title[data-tab="' + current[1] + '"]').closest('.elementor-widget-wrap').offset().top + 500
    }, 1000)
}

</script>

改善 Tab 分頁即可連結功能

Spread the love

|搜尋

|分類