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

我已经创建了一个选项卡式网页，刷新网页时需要进入所选选项卡

我试过了，但没有成功

看看这个：-

现在我正在将首选项存储在

localstorage

中

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

存储逻辑 全文

---

通过使用来自

当tab被更改时，这里所做的是使用活动tab元素的

索引修改cookie。在页面刷新中，获取该索引，并将class设置为
active
，同时删除其他类

更新
由于需要存储的数据量非常少，您可以选择使用cookie方法而不是本地存储。如果你想把IE<8作为目标，浏览器兼容性也是一个问题
 使用cookies存储活动选项卡并使用它。您是否可以更新给定的fiddle？问题是JavaScript是客户端语言，当您刷新页面时，浏览器（即客户端）会重新运行相同的脚本，并以默认值重新启动。因此，解决方案是在服务器语言（如PHP或ASP.NET）中存储cookie或其他常量，以跟踪哪个选项卡应处于活动状态。在这种情况下，JSFIDLE不是最佳示例，因为它在单击特定选项卡时不会更新url（这就是你在不使用javascript或其他任何东西的情况下跟踪选中哪个选项卡的方式。）你可以在谷歌上找到很多答案。我建议搜索。
$(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();
    });
});

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

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

});