Question

我已编写此代码以制作快速标签。刷新页面后，我需要一种方法来记住活动标签。

这是我的基本HTML代码：

<ul class="dashboard_tabs">
    <li><a href="#" rel="tab1">Tab 1</a></li>
    <li><a href="#" rel="tab2">Tab 2</a></li>
    <li><a href="#" rel="tab3">Tab 3</a></li>
    <li><a href="#" rel="tab4">Tab 4</a></li>
</ul>

<div class="dashboard_body" id="tab1">

</div>

<div class="dashboard_body" id="tab2">

</div>

<div class="dashboard_body" id="tab3">

</div>

<div class="dashboard_body" id="tab4">

</div>

我使用rel relationship来显示带有以下代码的正确选项卡：

jQuery(document).ready(function(){
    jQuery('.dashboard_body').css({display: 'none'});
    jQuery('.dashboard_tabs a:first').addClass('current');
    var rel = jQuery('.dashboard_tabs a.current').attr('rel');
    jQuery('#'+rel).show();

    jQuery('.dashboard_tabs a').click(function(){
        jQuery('.dashboard_tabs a').removeClass('current');
        jQuery('.dashboard_body').hide();
        jQuery(this).addClass('current');
        var rel = jQuery(this).attr('rel');
        jQuery('#'+rel).show();
    });
});

如何使用jQuery cookie记住活动标签？

Answer 1

只需在点击功能中创建/更新Cookie

$.cookie('active_tab', rel);

然后，您可以轻松地从准备好的函数中的cookie中读取活动选项卡，并使用CSS或类似的任何内容执行任何操作。

Answer 2

看看这个问题：How to set/unset cookie with jQuery?。您可以使用jquery-cookie插件轻松操作Cookie。在document ready上从Cookie中读取rel并设置正确的标签。在click event上只需将rel保存在Cookie中。

如何使用jQuery.cookies和自定义jQuery选项卡代码记住活动选项卡？

2 个答案: