4

我正在尝试使用 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>
4

4 回答 4

2

通过操作文档对象 (document.cookie) 的 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 方法。

于 2012-10-08T03:19:17.897 回答
1

有一个用于 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);
    });
});
​

小提琴

于 2012-10-08T03:20:42.387 回答
0

像这个例子

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

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

   });
 });
于 2012-10-08T03:06:03.047 回答
0

试试这个： 

// 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

});
于 2012-10-08T03:35:42.373 回答