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

编程问答 2022-06-01

问题描述

我有一个主页 (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 (将#修改为@）

accordionjavascriptjquerytabstabswordpresswordpress