Question

我创建了一个标签式网页，当我刷新网页时，我需要进入所选标签...

我试过但没有成功..

$(document).ready(function(){

    // When a link is clicked
    $("a.tab").click(function () {


        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        $(this).addClass("active");

        // slide all content up
        $(".content").slideUp();

        // slide this content up
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });
});

Answer 1

看看这个： -

现在我正在localstorage中存储偏好。

See Ref用于DOM存储选项。但在您的情况下，cookie可能是一个安全的选项，或者将其存储在服务器中。

Demo

存储逻辑

 if (localStorage.activeTab) {//see if a tab has been stored in the localStorage

    $('.active').removeClass('active');
    $(".tabs li:nth-child(" + (parseInt(localStorage.activeTab, 10) + 1) + ")  a.tab").addClass('active'); //Select that tab based on preference.
   }


localStorage.activeTab = $(this).parent().index(); //Store the tab in the storage.

完整脚本

$(document).ready(function () {


    if (localStorage.activeTab) {//see if a tab has been stored in the localStorage

        $('.active').removeClass('active');
        $(".tabs li:nth-child(" + (parseInt(localStorage.activeTab, 10) + 1) + ")  a.tab").addClass('active'); //Select that tab based on preference.
    }
    // When a link is clicked
    $("a.tab").click(function () {


        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        $(this).addClass("active");
        localStorage.activeTab = $(this).parent().index(); //Store the tab in the storage.
        // slide all content up
        $(".content").slideUp();

        // slide this content up
        var content_show = $(this).attr("title");
        $("#" + content_show).slideDown();
    });
});

Answer 2

使用https://github.com/carhartl/jquery-cookie

中的Cookie插件

var prevActiveTab = $.cookie("activeTabIndex");

$("a.tab").removeClass("active");
var $oldActive = $("a.tab").eq(prevActiveTab).addClass("active");
$(".content").slideUp();
var content_show = $oldActive.attr("title");
$("#"+content_show).slideDown();

// When a link is clicked
$("a.tab").click(function () {

$.cookie("activeTabIndex",$("a.tab").index($(this)));
// switch all tabs off
$(".active").removeClass("active");

// switch this tab on
$(this).addClass("active");

// slide all content up
$(".content").slideUp();

// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();

});

这里做了什么，当更改选项卡时，使用活动选项卡元素的index修改cookie。在页面刷新时，获取该索引并将类设置为active并删除其他类。

<强>更新由于需要存储的数据量非常少，因此您可以选择使用cookie方法而不是localstorage。如果您想要定位IE＆lt;浏览器兼容性也是问题。 8.

页面刷新时选择的选项卡

2 个答案:

存储逻辑

完整脚本