Ссылка на другую вкладку из содержимого другой вкладки, а затем прокрутка до закладки на вкладке - PullRequest
0 голосов
/ 05 августа 2020

Заранее благодарим за любую помощь. Я работаю с темой 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...