返回页面时，保持手风琴选项卡处于活动状态

Question

我有一个手风琴，其中包含指向选项卡内容中子页面的链接。

当用户通过浏览器的后退箭头或子页面上的主页链接从子页面导航回主页时，我希望打开将他们引导到该页面的选项卡。

链接到JSFIDDLE：

https://jsfiddle.net/tqpj1t0w/4/

法典：

$('#accordion').find('.accordion-toggle').click(function (){
  //Expand or collapse this panel
  $(this).next().toggleClass('active');
  //Hide the other panels
  $(".accordion-content").not($(this).next()).removeClass('active');});

<div id="accordion">
      <section>
        <h2 class="accordion-toggle">test 1</h2>
          <div class="accordion-content">
        <a href="#">subpage link</a>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           </div>
      </section>
      <section>
        <h2 class="accordion-toggle">test 2</h2>
          <div class="accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           </div>
      </section>
      <section>
        <h2 class="accordion-toggle">test 3</h2>
          <div class="accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           </div>
      </section>

谢谢。

Answer 1

您可以使用 cookie 或本地存储来执行此操作

单击手风琴

时，保存活动手风琴的索引

$('#accordion').find('.accordion-toggle').click(function (){
      localStorage.setItem("accordion", $(this).closest('section').index());
      localStorage.removeItem("accordion");
      //Expand or collapse this panel
      $(this).next().toggleClass('active');
      //Hide the other panels
      $(".accordion-content").not($(this).next()).removeClass('active');
  });

然后在 document.ready 函数上读取该属性并激活手风琴

var activeAccordion = localStorage.getItem("accordion");
  if(activeAccordion){
    $('#accordion section:eq('+activeAccordion+') .accordion-content').toggleClass('active');
  }

查看更新的小提琴

Answer 2

有两种方法：

1）您只需将id放在标题中，然后在localStorage中获取Active 选项卡的id，然后检查何时返回同一页面。

前任：

localStorage.setItem("activeTab", "test1");
 if(localStorage!=null)
 {
var activeTabId =  localStorage.getItem("activeTab")
$('#accordion').find(activeTabId).addClass('active');
}

2） 改用查询字符串并检查何时返回该页面。

我希望它有所帮助。