Question

我在尝试在页面刷新时保存选定的标签时遇到问题。我非常接近，但刷新页面时标签仍然无法保存。我一直在更改我的代码以使用事件委派来解决我的很多问题。我尝试在我的.click（）函数中单击已保存的选项卡，但仍然没有运气。我错过了什么？以下是我到目前为止的情况：

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

Answer 1

要将特定标签设置为有效标签，您应使用active属性：

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

页面刷新时的Javascript保存选项卡选择

1 个答案: