リロードし続けるページでトグル/タブを選択したままにする

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>