Заранее благодарим за любую помощь. Я работаю с темой Avada в Wordpress, используя элемент управляемых вкладок jQuery, предусмотренный в теме. Пожалуйста, простите за длинный пост, но я попытался предоставить весь связанный код. Я не предоставил HTML фактическому виджету вкладки, поскольку, будучи создателем тем, он довольно длинный и разорванный, но все соответствующие классы / идентификаторы находятся в моем коде jQuery.
Это файл jQuery, который управляет элементом в теме:
jQuery(document).on("ready fusion-widget-render-Fusion_Widget_Tabs",function(){
jQuery(".fusion-tabs-widget .fusion-tabs-nav li a").click(function(a){
var b=jQuery(this).data("link");
a.preventDefault(),
jQuery(this).parents(".fusion-tabs-nav").find("li").removeClass("active"),
jQuery(this).parent().addClass("active"),
jQuery(this).parents(".fusion-tabs-widget").find(".fusion-tab-content").hide(),
jQuery(this).parents(".fusion-tabs-widget").find('.fusion-tab-content[data-name="'+b+'"]').fadeIn()
})
});
Клиент хотел, чтобы вертикальные вкладки оставались, поэтому я добавил соответствующий css в контейнер вкладок, который работает нормально, но если пользователь нажимает на другую вкладку после прокрутки текущей вкладки, новая вкладка открыта в середине содержимого, поэтому я добавил это jQuery для прокрутки к началу содержимого:
/* scroll to tab-content container on tab click
-------------------------------------------------------- */
$(".tab-link").click(function(e){
e.preventDefault();
$('html,body').animate({scrollTop: $(".tab-content").offset().top}, 'fast');
});
Клиент хотел щелкнуть на другую вкладку из содержимого активной вкладки, поэтому я написал это jQuery ... Немного неудобно, но отлично работает - приветствуются предложения по очистке:
/* link to another tab from within tab-pane content
> class = number in class represents the tab count
> away from the active pane where link resides
> eg. next-tab-1 links to the next tab down/right
> eg. prev-tab-1 links to the the previous tab up/left
USAGE:
<a class="next-tab-X" href="#">Next</a>
<a class="prev-tab-X" href="#">Previous</a>
-------------------------------------------------------- */
$(".next-tab-1").click(function(e){ e.preventDefault();
var next = jQuery('.nav-tabs > .active').next('li');
if(next.length){next.find('a').trigger('click');}
});
$(".next-tab-2").click(function(e){ e.preventDefault();
var next = jQuery('.nav-tabs > .active').next('li').next('li');
if(next.length){next.find('a').trigger('click');}
});
$(".next-tab-3").click(function(e){ e.preventDefault();
var next = jQuery('.nav-tabs > .active').next('li').next('li').next('li');
if(next.length){next.find('a').trigger('click');}
});
$(".next-tab-4").click(function(e){ e.preventDefault();
var next = jQuery('.nav-tabs > .active').next('li').next('li').next('li').next('li');
if(next.length){next.find('a').trigger('click');}
});
$(".next-tab-5").click(function(e){ e.preventDefault();
var next = jQuery('.nav-tabs > .active').next('li').next('li').next('li').next('li').next('li');
if(next.length){next.find('a').trigger('click');}
});
$(".prev-tab-1").click(function(e){ e.preventDefault();
var prev = jQuery('.nav-tabs > .active').prev('li');
if(prev.length){prev.find('a').trigger('click');}
});
$(".prev-tab-2").click(function(e){ e.preventDefault();
var prev = jQuery('.nav-tabs > .active').prev('li').prev('li');
if(prev.length){prev.find('a').trigger('click');}
});
$(".prev-tab-3").click(function(e){ e.preventDefault();
var prev = jQuery('.nav-tabs > .active').prev('li').prev('li').prev('li');
if(prev.length){prev.find('a').trigger('click');}
});
$(".prev-tab-4").click(function(e){ e.preventDefault();
var prev = jQuery('.nav-tabs > .active').prev('li').prev('li').prev('li').prev('li');
if(prev.length){prev.find('a').trigger('click');}
});
$(".prev-tab-5").click(function(e){ e.preventDefault();
var prev = jQuery('.nav-tabs > .active').prev('li').prev('li').prev('li').prev('li').prev('li');
if(prev.length){prev.find('a').trigger('click');}
});
HTML
<a class="next-tab-X" href="#">Next</a>
<a class="prev-tab-X" href="#">Previous</a>
Вот моя проблема: клиент хотел бы иметь возможность ссылаться на закладку на другой вкладке и прокручивать содержимое (если возможно) к закладке по ссылке на активной вкладке. Я пробовал несколько методов, но не могу найти решения.
Это моя последняя попытка:
$(".goSpPrev1").click(function(e){ e.preventDefault();
var prev = jQuery('.nav-tabs > .active').prev('li');
var thisId = $(this).data('goID');
if(prev.length){
prev.find('a').trigger('click');
scrollToId(thisId);
}
});
function scrollToId(thisId){
$('html,body').animate({scrollTop: $("#" + thisId).offset().top}, 'fast');
}
HTML
<a class="goSpPrev1" data-goID="lg_exercise1" href="#">LG Exercise 1</a>