javascript — держать выбранный переключатель / вкладку открытой на странице, которая постоянно перезагружается

Question

javascript — держать выбранный переключатель / вкладку открытой на странице, которая постоянно перезагружается

Я хотел бы оставить выбранный переключатель открытым на странице, которая постоянно перезагружается.

страница 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>

1

javascript jquery php toggle

Решение

По вопросам рекламы [email protected]

Accepted Answer

Это простой пример, позволяющий добиться этого, сохраняя значение открытой вкладки в переменной. Кроме того, вы можете сохранить его в файле cookie, если хотите, чтобы он сохранялся при следующем посещении страницы пользователем.

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

var open_tab = 1function 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>

0

Другие решения

Других решений пока нет …

Источник