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

【问题标题】：Keep selected toggle/tab open on a page that keeps being reloaded在不断重新加载的页面上保持选定的切换/选项卡打开
【发布时间】：2017-12-14 11:34:46
【问题描述】：

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

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>

【问题讨论】：

你可以制作小提琴吗？
我觉得jsfiddle不支持php？
是的，但是你只是省略了 php 部分，因为它会获取一些内容。
为什么你总是每 10 秒重新加载一次内容？我们需要更多背景信息来了解您尝试实现的功能以及您想要它的原因。
INFO.php 页面将被包含 SQL 数据的不同选项卡填充。选项卡/切换将数据划分为不同的城市：阿姆斯特丹有自己的选项卡和伦敦。

标签： javascript php jquery toggle

【解决方案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>

【讨论】：