WordPress上带有手风琴脚本的JS问题涉及初始背景色

如何解决WordPress上带有手风琴脚本的JS问题涉及初始背景色

遇到一个问题，我有一个JavaScript，该JavaScript允许您单击家中的链接，并且打开一个带有手风琴的页面（使用Elementor插件），该页面最多可以打开四个窗格之一，具体取决于链接。

脚本的该部分有效，但是无论打开哪个窗格，活动选项卡的背景颜色始终是第一个。它应该添加一个称为elementor-acitve的类，但是没有，我很困惑为什么。

要查看其运行情况，请转到https://deganiagroup.com/，然后向下滚动至“服务”，然后单击右侧的三个链接中的任何一个，这将打开第二，第三或最后一个窗格。

这是我的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-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)
}
</script>

解决方法

当您激活活动页面时，您必须通过JavaScript添加active class to tab header您已经激活的标签页。您应该进行的更改。

 setTimeout(function () {
        var current = window.location.href
        var current = current.split('#tab')
        if (current.length > 1) {
         $('.elementor-tab-title[data-tab="' + current[1] + '"]').addClass('elementor-active');
         showAndScrollToTab($,current)
    }
    },200);

更新

您可以通过2种方式来实现。将上面的代码更改为

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($,200);

第二种循环方式