javascript - 在不断重新加载的页面上保持选定的切换/选项卡打开

Question

我想在不断重新加载的页面上保持选定的切换开关打开。

INFO.php 页面已打开开关:

<div class="toggle toggle-transparent toggle-bordered-simple">
<div class="toggle">
    <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
    <div class="toggle-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
    </div>
</div>

以及不断加载它的页面:

        <section>
            <div class="container">
                <div id="portfolio" class="portfolio-gutter mt-20 mb-60">
                    <div class="row mix-grid refreshed">
                        <?php include 'INFO.php'; ?>
                    </div>
                </div>
            </div>
        </section>

以及重新加载:

<script type="text/javascript">
        var auto_refresh = setInterval(
                function ()
                {
                    $('.refreshed').load('INFO.php').fadeIn();
                }, 10000);

    </script>

Answer 1

这是一个很容易实现的简单示例，它将打开的选项卡的值存储在变量中。或者，如果您希望它在用户下次访问该页面时保留，您可以将其存储在 cookie 中。

$(document).ready(function(){
  var simulatedContent = $($("#wrapper").html());

  var open_tab = 1
  
  
  function initTabs(){
    $(".tab"+open_tab).show()
    $(".tabs li a").on("click",function(){
       var i = $(this).data("tab");
       open_tab = i
       $(".tab").hide()
       $(".tabs li").removeClass('active');
       $(this).parent().addClass('active');
       $(".tab"+i).show()
        
    })
  }
  
  var auto_refresh = setInterval(function ()
  {
      $('#wrapper').html("<h3>loading..</h3>")
      setTimeout(function(){
        $('#wrapper').html(simulatedContent);
        initTabs()
      }, 500);
  }, 3000);
  
  initTabs()
})

* { font-family:Arial}
.tab { padding:5px;display:none;height:100px;background:#efefef;}
.tabs li {  background:grey;padding: 5px;width:33% }
.tabs li.active { background:black;}
.tabs li a { color:white;display:block;text-decoration:none;}
.tabs { height: 30px;margin:0;padding:0;list-style:none;display:flex;width: 100%; background: grey;  clear:both;}
#wrapper { background: grey; width: 300px; height: 130px;}
h3 { text-align:center; margin:0;padding-top: 50px; font-size: 15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wrapper">
<ul class="tabs">
<li class="active"><a href="javascript:;" data-tab="1">tab 1</a></li>
<li><a href="javascript:;" data-tab="2">tab 2</a></li>
<li><a href="javascript:;" data-tab="3">tab 3</a></li>
</ul>
<div class="tab tab1">tab 1 content</div>
<div class="tab tab2">tab 2 content</div>
<div class="tab tab3">tab 3 content</div>
</div>