返回页面

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或local storage

来完成

单击手风琴时保存活动的索引

$('#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');
  }

请参阅updated fiddle

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）使用查询字符串，并检查何时返回该页面。

我希望它有所帮助。