當我點擊瀏覽器後退按鈕或移動設備後退按鈕

下面的移動視圖中的標籤代碼和我的問題時，保持選定的選項卡我如何保持選定的選項卡，如果我點擊選定的選項卡中的任何鏈接，並去任何一個環節，當我在移動設備或瀏覽器後退按鈕回到後退按鈕單擊以選中選項卡當我點擊瀏覽器後退按鈕或移動設備後退按鈕

<!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

當我點擊瀏覽器後退按鈕或移動設備後退按鈕

回答

相關問題