微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JavaScript:链接到在桌面上工作的选项卡式面板,而不是在移动设备上

如何解决JavaScript:链接到在桌面上工作的选项卡式面板,而不是在移动设备上

我有一个主页 (https://deganiagroup.com),如果您向下滚动到“服务”区域,则有四个链接链接到同一页面,但每个链接会在手风琴内打开一个不同的窗格/选项卡。 (示例 URL:https://deganiagroup.com/services#tab2)在桌面上这可以正常工作,但在移动设备上则不然。这很奇怪,我不知道为什么。

这是一个 wordpress / Elementor 手风琴小部件,因此我无法更改其中的代码,但我可以通过 JavaScript 使用现有代码。所以这是我目前使用的脚本:

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) {
            $('.elementor-accordion-item:first-child').find('.elementor-tab-title').removeClass('elementor-active');
            $('.elementor-tab-title[data-tab="' + current[1] + '"]').addClass('elementor-active');
            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-content').removeClass('elementor-active').css('display','none')
    $('.elementor-tab-content[data-tab="' + current[1] + '"]').addClass('elementor-    active').css('display','block')
    $('.elementor-tab-content').hide();
    $('.elementor-tab-content[data-tab="'+current[1]+'"]').show();
    // 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 - headerHeight
    },2000)
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。