我在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
});
});