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

如果我正确阅读docs，则应使用外部div初始化标签：

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

此外，看起来tab-content divs应与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

我还没有阅读任何来自tab功能的文档，因为你没有指定，但是像其他任何东西一样，这是可以攻击的。您需要做的就是在单击选项卡时激活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
});

设置活动标签javascript

3 个答案: