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>

保持选定的切换/标签在不断重新加载的页面上打开

1 个答案: