我有以下手风琴代码。代码工作正常。我想在页面刷新时使选定的选项卡保持活动状态。但是我添加的 javascript 不起作用。我不知道确切的问题是什么。
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript">
$(document).ready(function(){
$('button[data-toggle="collapse"]').on('shown.bs.collapse', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('data-target'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#accordionExample button[data-target="' + activeTab + '"]').collapse('show');
}
});
</script>
首先，将 id（要显示的 div）添加到会话中。 然后在重新加载后你就得到了会话。并通过js显示当前的div。这是我执行此操作的代码。
$(document).ready(function() {
// Get saved data from sessionStorage
let selectedCollapse = sessionStorage.getItem('selectedCollapse');
if(selectedCollapse != null) {
$('.accordion .collapse').removeClass('show');
$(selectedCollapse).addClass('show');
}
//To set, which one will be opened
$('.accordion .btn-link').on('click', function(){
let target = $(this).data('target');
//Save data to sessionStorage
sessionStorage.setItem('selectedCollapse', target);
});
});
请注意，根据您的代码，我认为您使用了 bootstrap 和 jquery。您必须至少需要 jquery 才能执行上述操作。
我不知道这是否正确，但它会以某种方式起作用。
这是一个非常简单的方法：
$("#").load(location.href + " #");
总是在第二个
#我发现这篇文章在解决我自己的 Bootstrap Accordion 问题时特别有用，其中 AJAX 不是一个选项。但是，我确实想稍微扩展一下 hasan05 提供的代码。我基本上添加了检查以查看用户是否完全离开页面，或者只是重新加载它（例如回发操作）。我将我的设置为在 3 秒后销毁会话数据。如果您不再使用它们，通常最好销毁您的 sessionStorage。
//:: Accordion check: Saves current accordion tab state in a session, so it can be returned to on page reload
function setAccordionSession() {
let selectedAccordion = sessionStorage.getItem('selectedAccordion');
//:: if sessionStorage has a value, choose that header to expand
if (selectedAccordion != null) {
$('.accordion .collapse').removeClass('show');
$('.accordion-button').attr('aria-expanded', false);
$('.accordion-button').addClass('collapsed');
$(selectedAccordion).addClass('show');
$(selectedAccordion).attr('aria-expanded', true);
//:: Loop through each Accordion Button to see if data-bs-target exists and remove collapsed class
$.each($('.accordion-button'), function () {
if ($(this).is('[data-bs-target="' + selectedAccordion + '"]')) {
$(this).removeClass('collapsed');
}
});
}
//:: no sessionStorage value present, therefore we must want the default accordion views
else {
$('div#collapseOne').addClass('show');
$('h2#headingOne > button').attr('aria-expanded', true);
$('h2#headingOne > button').removeClass('collapsed');
}
};
//:: When one clicks the accordion button/tab, save its current data-bs-target value to sessionStorage
$('.accordion .accordion-button').on('click', function () {
let target = $(this).data('bs-target');
sessionStorage.setItem('selectedAccordion', target);
});
//:: When User navigates away from page, take a stamp of current Date/Time
$(window).on("beforeunload", function () {
window.localStorage.unloadTime = JSON.stringify(new Date());
})
//:: Check unload time vs load time to determine if sessions should be cleared or not.
window.onload = function () {
let loadTime = new Date();
let unloadTime = new Date(JSON.parse(window.localStorage.unloadTime));
let refreshTime = loadTime.getTime() - unloadTime.getTime();
//:: If user was gone more than 3 seconds, clear the sessionStorage and generate accordions with defaults
if (refreshTime > 3000) {
sessionStorage.clear();
setAccordionSession();
}
else {
//:: Page must have been refreshed, maintain current state using existing sessionStorage
setAccordionSession();
}
};