2017-08-10 73 views
0

我在嘗試保存頁面刷新中選定的選項卡時遇到問題。我非常接近,但當刷新頁面時,該選項卡仍不會保存。我一直在改變我的代碼來使用事件代表團來解決我的很多問題。我試圖在我的.click()函數中點擊保存的標籤,但仍然沒有運氣。我錯過了什麼?以下是我迄今爲止:在頁面刷新時使用Javascript保存選項卡

<script language="javascript" type="text/javascript"> 
     $(".tabs").tabs(); 
      var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1; 
      console.log("local storage value tabIndex parseInt: " + tabIndex); 
      if(tabIndex != null){ 
        console.log("I am in the if statement: " + localStorage.getItem('activeTab')); 
        $(document).on("click", ".tabs > ul > li:nth-child(" + tabIndex + ") a", function(e) {}); 
      } 
     $(document).on("click", ".tab-links a", function(e) { 
      $('.active').removeClass('active'); 
      $(this).parent().addClass('active'); 
      var curTab = $('.tab-links').find('.active')[0].id; 
      console.log("This is the currentTab value: " + curTab.replace (/[^\d.]/g, '')); 
      var curTabIndex = (curTab.replace (/[^\d.]/g, '') - 1); 
      localStorage.setItem('activeTab', curTabIndex); 
     }); 
</script> 

<div class="tabs"> 
<ul class="tab-links"> 
    <li id="t1"><a href="#tab1" class="tab1a">One</a></li> 
    <li id="t2"><a href="#tab2" class="tab2a">Two</a></li> 
    <li id="t3"><a href="#tab3" class="tab3a">Three</a></li> 
    <li id="t4"><a href="#tab4" class="tab4a">Four</a></li> 
    <li id="t5"><a href="#tab5" class="tab5a">Five</a></li> 
    <li id="t5"><a href="#tab6" class="tab6a">Six</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="tab1" class="tab active" > 
     <?php include("tab_1.html"); ?> 
    </div> 

    <div id="tab2" class="tab" > 
     <?php include("tab_2.html"); ?> 
    </div> 

    <div id="tab3" class="tab" > 
     <?php include("tab_3.html"); ?> 
    </div> 

    <div id="tab4" class="tab active"> 
     <?php include("tab_4.html"); ?> 
    </div> 

    <div id="tab5" class="tab active"> 
     <?php include("tab_5.html"); ?> 
    </div> 

    <div id="tab6" class="tab active"> 
     <?php include("tab_6.html") ?> 
    </div> 
</div> 

回答

0

爲了設置特定的標籤爲主動,你應該使用active屬性:似乎

var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1; 
console.log("local storage value parseInt: " + tabIndex); 
$(".tabs").tabs({ 
    active: tabIndex 
}); 
+0

這不工作。 – kkmoslehpour

+0

你有保存在localStorage中的正確'tabIndex'嗎?檢查它... – Dekel

+0

我選擇了第一個選項卡,並記錄了tabIndex,它應該選擇我的活動選項卡作爲1或2.這是刷新頁面「tabIndex parseInt:1的本地存儲值」後的輸出「 – kkmoslehpour

相關問題