如何保存页面刷新后的活动标签javascript

Question

我试图在页面刷新时保存为活动标签状态。目前，我有以下代码，但是，当我输出以控制ui-state-active时，它使我返回-1作为值。它似乎甚至没有注册我的click（）函数，导致我的console.log函数永远不会输出。我相信我在这里做错了事。

<script language="javascript" type="text/javascript"> 
     $(".tabs").tabs(); 
      var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1; 
      console.log("local storage value parseInt: " + tabIndex); 
      if(tabIndex != null){ 
        console.log("I am in the if statement: " + localStorage.getItem('activeTab')); 
        $('.tabs > ul > li:nth-child('+ (tabIndex) +')').find('a').click(); 
      } 
     $(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> 
    </div> 

Answer 1

我会建议做的是你的点击处理程序中，除去“主动”类开始，然后张贴于点击的元素：

$('.tab-links a').click(function(e) { 
 
    $('.active').removeClass('active'); 
 
    $(this).parent().addClass('active'); 
 
    var curTab = $(this).parent()[0].id; // Or $('.tab-links').find('.active')[0].id; 
 
    console.log("This is the currentTab value: " + curTab); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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"></div> 
 
    <div id="tab2" class="tab"></div> 
 
    <div id="tab3" class="tab"></div> 
 
    <div id="tab4" class="tab"></div> 
 
    <div id="tab5" class="tab"></div> 
 
    <div id="tab6" class="tab"></div> 
 
    </div> 
 
</div>

请注意，您应该在任何时候都只有一个“主动”类。

另外要注意，如果你是动态添加你的元素，你将需要扯起范围和利用event delegation。在这种情况下，$(document).on("click", ".tab-links a", function(e) {})替换$('.tab-links a').click(function(e) {})：

$(document).on("click", ".tab-links a", function(e) { 
 
    $('.active').removeClass('active'); 
 
    $(this).parent().addClass('active'); 
 
    var curTab = $(this).parent()[0].id; // Or $('.tab-links').find('.active')[0].id; 
 
    console.log("This is the currentTab value: " + curTab); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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"></div> 
 
    <div id="tab2" class="tab"></div> 
 
    <div id="tab3" class="tab"></div> 
 
    <div id="tab4" class="tab"></div> 
 
    <div id="tab5" class="tab"></div> 
 
    <div id="tab6" class="tab"></div> 
 
    </div> 
 
</div>

希望这有助于！ :)

Answer 2

无论是移动HTML低于整个<script></script>块或执行以下操作：

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    $(".tabs").tabs(); 
    var currentTab = $('.ui-state-active a').index(); 
    console.log("hi"); 
    console.log("this is the currentTab value: " + currentTab); 
    $('.tablinks a').click(function(e) { 
     console.log("i am in here"); 
     var curTab = $('.ui-tabs-active'); 
     curTabIndex = curTab.index(); 
     console.log(curTabIndex); 
    }); 
}); 
</script> 

Answer 3

在这里，你去了一个解决方案https://jsfiddle.net/dhynozb5/2/

$("#tabs").tabs(); 
 
var currentTab = $('.ui-state-active a').index(); 
 
if(localStorage.getItem('activeTab') != null){ 
 
\t $('#tabs > ul > li:nth-child('+ (parseInt(localStorage.getItem('activeTab')) + 1) +')').find('a').click(); 
 
} 
 

 
$('#tabs > ul > li > a').click(function(e) { 
 
    var curTab = $('.ui-tabs-active'); 
 
    curTabIndex = curTab.index(); 
 
    localStorage.setItem('activeTab', curTabIndex); 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></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" > 
 
     tab_1.html 
 
    </div> 
 

 
    <div id="tab2" class="tab" > 
 
    tab_2.html 
 
    </div> 
 

 
    <div id="tab3" class="tab" > 
 
    tab_3.html 
 
    </div> 
 

 
    <div id="tab4" class="tab active"> 
 
    tab_4.html 
 
    </div> 
 

 
    <div id="tab5" class="tab active"> 
 
    tab_5.html 
 
    </div> 
 

 
    <div id="tab6" class="tab active"> 
 
    tab_6.html 
 
    </div> 
 
    </div> 
 
</div>

突出的活动选项卡后，页面刷新，我用localStorage。

希望这会帮助你。