Question

我的项目示例是Here。我不了解cookies.Plz解释。我不想在页面加载后更改当前选择类。怎么做。？ Plz建议。

HTML

<a  onclick="changeClass(2)" href="javascript:">Red</a>
<a onclick="changeClass(1)" href="javascript:">Green</a>
<div class="red">Testing Text1</div>
<div class="red">Testing Text2</div>

CSS

.red {
    color: red;
    font-weight: bold;
}
.green {
    color: green;
    font-weight: bold;
}

Answer 1

您最好使用localStorage来实现此功能，它比Cookie更简单。例如：

function changeClass(value) {

    var newColor = value == 2 ? 'red' : 'green';
    localStorage.color = value;

    var elems = document.querySelectorAll('.red, .green');
    var i = elems.length;

    while (i--) {
        var item = elems[i];
        removeClass(item, 'red');
        removeClass(item, 'green'); // or removeClass(item, 'red|green');
        addClass(item, newColor);
    };
    return false;
};

然后在页面加载时设置正确的类，您可以使用localStorage中保存的颜色值再次调用changeClass：

window.onload = function() {
    changeClass(localStorage.color || 2);
};

演示：http://jsfiddle.net/xgmx11dt/4/

Answer 2

您要完成的是构建有状态的应用程序。现在有了当前的网络技术，有多种方法可以实现这一目标。

Cookies（虽然这是最糟糕的事情，但在技术上会有效）。有易于使用的库（例如这个jQuery插件：https://github.com/carhartl/jquery-cookie#readme）。
使用服务器端技术存储应用程序的状态。这可以是PHP，Node.js，Ruby。您基本上查询服务器的状态。显然，对于像你的例子这样简单的东西并不值得。
使用现代HTML5 API，会话存储或本地存储（http://www.w3schools.com/html/html5_webstorage.asp），这可能非常适合您的szenario。

你需要做的是，使用localStorage，如下所示（基于jquery）

$(document).ready(function(){
    changeClass(localStorage.getItem("state"));
})

在你的changeClass函数中，你需要设置locaStorage。

希望这有帮助

如何使用cookie通过纯JavaScript更改类名？

2 个答案:

演示：http://jsfiddle.net/xgmx11dt/4/