我正在尝试在页面刷新时保存到活动标签状态。目前，我有以下代码，但是，当我输出到控制台的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>
答案 0 :(得分：1)
我建议您在点击处理程序中执行操作，删除＆＃39;活动＆＃39;开始的类，然后将其粘贴到单击的元素：
$('.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>
请注意，您应该只有一个活跃的＆＃39;任何时候上课。
另请注意，如果要动态添加元素，则需要提升范围并使用 event delegation 。在这种情况下，请将$('.tab-links a').click(function(e) {})替换为$(document).on("click", ".tab-links a", 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>
希望这有帮助！ ：）
答案 1 :(得分：1)
您可以使用解决方案https://jsfiddle.net/dhynozb5/2/
$("#tabs").tabs();
var currentTab = $('.ui-state-active a').index();
if(localStorage.getItem('activeTab') != null){
$('#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。
希望这会对你有所帮助。
答案 2 :(得分：0)
将整个<script></script>块移到html下方或执行以下操作：
<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>