javascript - 设置事件选项卡 JavaScript

Question

我一直在尝试设置页面的事件选项卡。这很奇怪，因为我可以手动设置事件选项卡，如下所示:

<div class="tabs">
        <ul class="tab-links">
            <li id="t1" class="active"><a href="#tab1">TAB</a></li>  //setting it here works
            <li id="t2"><a href="#tab2">TAB</a></li>
            <li id="t3"><a href="#tab3">TAB</a></li>
            <li id="t4"><a href="#tab4">TAB</a></li>
            <li id="t5"><a href="#tab5">TAB</a></li>
            <li id="t6"><a href="#tab6">TAB</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab1" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab1.html");    ?>
            </div>
            <div id="tab2" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab2.html");    ?>
            </div>
            <div id="tab3" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab3.php");    ?>
            </div>
            <div id="tab4" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab4.php");    ?>
            </div>
            <div id="tab5" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab5.html");    ?>
            </div>
            <div id="tab6" class="tab" style="font-family: 'Open Sans', sans-serif;">
                <?php   include("tab6.html");    ?>
            </div>
        </div>

但是，当我尝试这样设置时，什么也没有发生:

<script language="javascript" type="text/javascript">

    //setting the tabIndex to the stored value.
    $(".tab-links").tabs({active: tabIndex}); //need to change this somehow
    var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1;
    console.log("local storage value of 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) {});
        //$(".tabs").tabs({
            //  active: tabIndex 
        //});
    }

    //storing the last tab index before page refresh
    $(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>

我在这里遗漏了什么吗？我只需要以某种方式将 tabIndex 设置为页面刷新时的事件选项卡。

Answer 1

这是一种不使用除 jQuery 之外的任何 jQuery 库的方法。

我们使用 localStorage 来存储 #hash。刷新页面后，我们检查是否存在哈希并使用它来查找使用它的链接。

$(function () {
    $(document).on('click', '.tab-links a', function () {
        var link = $(this), 
            listItem = link.parent(), 
            content = $(link.attr('href'));
        // show current link and content
        listItem.add(content).addClass('active');
        // hide other links and contents
        listItem.siblings().add(content.siblings()).removeClass('active');
        // save selected tab e.g. #tab1. #tab2, ...
        localStorage.setItem('activeTab', link.attr('href'));
    });
    // go back to last tab if any
    var activeTab = localStorage.getItem('activeTab'); // ex. #tab1, #tab2, ...
    if (activeTab) {
        $('.tab-links a[href="' + activeTab + '"]').click();
    }
})

确保内容仅在事件时显示

 .tab {
     display: none;
 }
 .tab.active {
     display: block;
 }

确保第一个选项卡默认处于事件状态

 <li id="t1" class="active"><a href="#tab1">TAB</a></li>

 <div id="tab1" class="tab active" style="font-family: 'Open Sans', sans-serif;">