设置活动标签的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;">

Answer 2

编辑

同样在文档中，它提到如果要在初始化后设置活动选项卡，可以使用

$('.selector').tabs("option", "active", 1)

因此，在您的情况下：

$(".tab-links").tabs("option", "active", tabIndex);

---

如果我正确阅读了文档 ，则应使用外部div初始化选项卡：

$('.tabs').tabs({active: 1});

另外，看起来tab-content div应该与ul元素处于同一级别。

这是他们使用的示例代码：

<div id="tabs">
  <ul>
    <li><a href="#fragment-1">One</a></li>
    <li><a href="#fragment-2">Two</a></li>
    <li><a href="#fragment-3">Three</a></li>
  </ul>
  <div id="fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

Answer 3

我还没有阅读制表符功能的来源的任何文档，因为您没有指定，但是像其他任何东西一样，这很容易破解。 您需要做的就是单击选项卡时将CSS类激活。

以下JQuery代码可能适合您：

$('ul.tab-links li').on('click', function(){
    $('li.active').removeClass('active'); // to remove the current active tab
    $(this).addClass('active'); // add active class to the clicked tab
});