记住Elementor插件(Wordpress)中刷新时的上一个活动选项卡

时间:2019-02-25 16:35:58

标签: jquery wordpress

我在wordpress网页上使用带有Elementor page builder(免费插件)的tabs选项。页面上有三个选项卡,每刷新页面一次,它就会失去上一次激活的选项卡,并返回到第一个选项卡。

我尝试了各种解决方案,但到目前为止无法使任何人工作:

Remember which tab was active after refresh

How to remember last tab used after submit/refresh?

Keep active tab on page refresh in bootstrap 4 using local storage?

标签的html-由elementor插件生成

<div data-id="bf42736"
    class="elementor-element elementor-element-bf42736 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs"
    data-element_type="tabs.default">
    <div class="elementor-widget-container">
        <div class="elementor-tabs" role="tablist">
            <div class="elementor-tabs-wrapper">
                <div id="elementor-tab-title-2001" class="elementor-tab-title elementor-tab-desktop-title" data-tab="1"
                    role="tab" aria-controls="elementor-tab-content-2001"><a href="">Tab #1</a></div>
                <div id="elementor-tab-title-2002" class="elementor-tab-title elementor-tab-desktop-title" data-tab="2"
                    role="tab" aria-controls="elementor-tab-content-2002"><a href="">Tab #2</a></div>
                <div id="elementor-tab-title-2003" class="elementor-tab-title elementor-tab-desktop-title" data-tab="3"
                    role="tab" aria-controls="elementor-tab-content-2003"><a href="">Tab #3</a></div>
            </div>
            <div class="elementor-tabs-content-wrapper">
                <div class="elementor-tab-title elementor-tab-mobile-title" data-tab="1" role="tab">Tab #1</div>
                <div id="elementor-tab-content-2001" class="elementor-tab-content elementor-clearfix" data-tab="1"
                    role="tabpanel" aria-labelledby="elementor-tab-title-2001">Click edit button to change this text. Lorem
                    ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis,
                    pulvinar dapibus leo.</div>
                <div class="elementor-tab-title elementor-tab-mobile-title" data-tab="2" role="tab">Tab #2</div>
                <div id="elementor-tab-content-2002" class="elementor-tab-content elementor-clearfix" data-tab="2"
                    role="tabpanel" aria-labelledby="elementor-tab-title-2002">Click edit button to change this text. Lorem
                    ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis,
                    pulvinar dapibus leo.</div>
                <div class="elementor-tab-title elementor-tab-mobile-title" data-tab="3" role="tab">Tab #3</div>
                <div id="elementor-tab-content-2003" class="elementor-tab-content elementor-clearfix" data-tab="3"
                    role="tabpanel" aria-labelledby="elementor-tab-title-2003">Tab Content</div>
            </div>
        </div>

我尝试过的js:

$(function () {
    $(".elementor-tabs").tabs({
        activate: function (event, ui) {

            localStorage.setItem("lastTab", ui.newTab.index());
        },
        active: localStorage.getItem("lastTab") || 0
    });
});

0 个答案:

没有答案