Bootstrap 如何在页面刷新时保持当前手风琴处于活动状态

Question

我有以下手风琴代码。代码工作正常。我想在页面刷新时使选定的选项卡保持活动状态。但是我添加的 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>

Answer 1

首先，您将 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);
  });
});

Note that, I saw your code. I think you used bootstrap and jquery. You must need the jquery at least to perform the avobe actions.

我不知道这样对不对。但它会以某种方式起作用。

Answer 2

这是一个非常简单的方法：

$("#").load(location.href + " #");

始终在第二个 # 符号之前给出 space，否则上面的代码将 return 整个页面。

Bootstrap 如何在页面刷新时保持当前手风琴处于活动状态

How to keep the current Accordion active on page refresh in Bootstrap

html

javascript

accordion

bootstrap-4