Сохраните выбранную вкладку, когда я нажимаю кнопку «Назад назад» или кнопку возврата мобильного устройства

приведенный ниже код для вкладок в мобильном представлении и мой вопрос, как я могу сохранить выбранную вкладку, если я нажму на любую ссылку на выбранной вкладке и перейду к любые ссылки и когда я нажимаю на кнопку назад в мобильном устройстве или в браузере задней кнопки возврата к выбранной вкладкеСохраните выбранную вкладку, когда я нажимаю кнопку «Назад назад» или кнопку возврата мобильного устройства

<!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
       $('a.tab-menu').click(function(){ 
        if ($(window).width() < 768) 
        $('#tab-'+($('.tab-menu').index($(this))+1)).slideToggle("slow").siblings('div').hide('slow'); 
       }); 
      }); 
    </script> 
    </head> 

    <body> 
    <h2 class="responsive-tab"><a href="#tab-1" class="tab-menu">tab 1</a></h2> 
    <div id="tab-1"> content here </div> 
    <h2 class="responsive-tab"><a href="#tab-2" class="tab-menu">tab 1</a></h2> 
    <div id="tab-2"> content here </div> 
    <h2 class="responsive-tab"><a href="#tab-3" class="tab-menu">tab 1</a></h2> 
    <div id="tab-3"> <a href="#">link here</a> </div> 
    </body> 
    </html>

источник

2015-10-19 user3153433

Вы хотите оставить вкладку открытой, когда пользователь нажимает кнопку назад? Зачем? – Cruiser

требования клиентов! – user3153433

http://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser – Cruiser

Вы можете использовать localStorage или sessionStorage

http://www.w3schools.com/html/html5_webstorage.asp

Так что-то вроде этого:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script> 
$(document).ready(function(){ 
      if (localStorage.which_tab) { 
       $('#tab-'+localStorage.which_tab).slideToggle("slow").siblings('div').hide('slow'); 
       $('#tab-'+ localStorage.which_tab).slideToggle('slow'); 
      } 
      $('a.tab-menu').click(function(){ 
       if ($(window).width() < 768) 
       $('#tab-'+($('.tab-menu').index($(this))+1)).slideToggle("slow").siblings('div').hide('slow'); 
       var t = $(this).attr('data-type') 
       localStorage.which_tab = t 
      }); 
     }); 
</script> 
</head> 

<body> 
<h2 class="responsive-tab"><a href="#tab-1" data-type="1" class="tab-menu">tab 1</a></h2> 
<div id="tab-1"> content here </div> 
<h2 class="responsive-tab"><a href="#tab-2" data-type="2" class="tab-menu">tab 1</a></h2> 
<div id="tab-2"> content here </div> 
<h2 class="responsive-tab"><a href="#tab-3" data-type="3" class="tab-menu">tab 1</a></h2> 
<div id="tab-3"> <a href="#">link here</a> </div> 
</body> 
</html>

Вы можете просмотреть в plnkr

http://plnkr.co/edit/6sVWrdfjnZyb9sDEog7V?p=preview

источник

2015-10-19 21:12:58 DataHerder

работает, спасибо большое – user3153433

Сохраните выбранную вкладку, когда я нажимаю кнопку «Назад назад» или кнопку возврата мобильного устройства

ответ

Смежные вопросы