问题描述
遇到一个问题,我有一个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);
第二种循环方式