Question

我正在尝试使用Cookie，以便在引用单击的锚标记时应用默认样式或特定样式，即使浏览器已关闭/重新打开也是如此。因此，如果用户单击第二个链接，关闭或刷新浏览器并重新打开，则样式仍应处于活动状态，如果这是第一次应用默认值。这有点超过我的地盘。

以下是HTML：

<a id="default" href="#/">Default Style</a>
<a id="style2"  href="#/">Style 2</a>
<a id="style3"  href="#/">Style 3</a>

<ol>
<li><span>Hello World</span></li>
</ol>

JQuery :( StackOverflow的赞美）

<script type="text/javascript">
$('#default').on('click',function(){
    $('ol li span').removeClass(function() {
          return $(this).attr('class');
        }).addClass('default');
});
$('#style2').click(function(){
    $('ol li span').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style2');
});
$('#style3').click(function(){
    $('ol li span').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style3');
});
</script>

CSS：

<style type="text/css">
.default{
color: #333;
}

.style2{
color: #999;
}

.style3{
color: #800;
}
</style>

Answer 1

通过操纵文档对象的cookie属性（document.cookie）来获取和设置Cookie。 Mozilla开发者网络有一篇很棒的文章讨论这个问题，并提供了获取和设置cookie的便捷方法。 https://developer.mozilla.org/en-US/docs/DOM/document.cookie

注意：jQuery不附带任何与cookie相关的方法，但是可以使用插件来为这些方法添加语法糖（$ .cookie）。

否则，您可以检查您的cookie并在准备好的回调中以通常的方式处理该逻辑。

    $(body).ready(function(){
       if (document.cookie.match("cookie_name")) {
          // Handle logic here
       }
    });

至于基于锚点的设置来设置cookie，你可以使用onclick属性，或者将href属性设置为“javascript：yourFunction（）;”，或者使用jQuery的click方法。

Answer 2

有一个jQuery的cookie插件可以用来设置和获取cookie，但是如果早于IE8的浏览器不是问题，我会选择本地存储而只使用1％的默认样式使用旧浏览器的访问者。

如果您在链接中添加了一个类，您可以在一个函数中定位所有类，只需根据单击的ID设置类，这是使用本地存储的示例：

$(function() {
    if (localStorage.getItem('style')) {
        $('ol li span').addClass(localStorage.getItem('style'));
    }else{
        $('ol li span').addClass('default');
    }

    $('.styles').on('click', function(e) {
        e.preventDefault();
        var styles    = ['default', 'style2', 'style3'],
            currStyle = this.id;

        $('ol li span').removeClass(styles.join(' ')).addClass(currStyle);

        localStorage.setItem('style', currStyle);
    });
});

FIDDLE

Answer 3

就像这个例子

$(document).ready(function()
{
   $('a').click(function(event)
   {

        $.cookie(//set ur cookie name & value);

   });
 });

Answer 4

试试这个：

// You can set all your default, style2, style3 css code inside this active.css

function appendStyleSheet() {
  $('head').append('<link rel="stylesheet" href="css/active.css" type="text/css"     id="active_stylesheet"/>'); 
}

// append the style sheet on load if the cookie is set to true
if ($.cookie('active') == 'true') {
    appendStyleSheet();      
} else {
    $('ol li span').addClass("default");
}

$("a").click(function () {

        var styles    = ['default', 'style2', 'style3'],
        currStyle     = this.id;

        $('ol li span').removeClass(styles.join(' ')).addClass(currStyle);

        appendStyleSheet();      
        $.cookie('active', 'true'); // set the cookie to true

});

如何在锚点击时设置/存储cookie

4 个答案: