Question

我没有太多使用JavaScript的经验，但我正在进入jQuery并一路学习。我的页面上有一个样式表切换器（或主题切换器），但它在刷新/访问不同页面时切换到默认样式表。

我知道会使用Cookie，但不知道如何将其应用到我的代码中......

<link rel="stylesheet" type="text/css" href="css/light-theme.css"> (in my head tag, html)

jQuery:
$('#dark').click(function (){
   $('link[href="css/light-theme.css"]').attr('href','css/dark-theme.css');
});
$('#light').click(function (){
   $('link[href="css/dark-theme.css"]').attr('href','css/light-theme.css');
});

感谢帮助人员。

Answer 1

我确定您可以使用Cookie来完成，但我会尝试使用HTML5本地存储

jQuery的：

$('#dark').click(function (){
   $('link[href="css/light-theme.css"]').attr('href','css/dark-theme.css');
   localStorage.stylesheet = 'css/dark-theme.css';
});
$('#light').click(function (){
   $('link[href="css/dark-theme.css"]').attr('href','css/light-theme.css');
   localStorage.stylesheet = 'css/light-theme.css';
});

不确定是否必须等待文档准备就绪才能访问样式表。

$(document).ready(function(){
     if(localStorage.stylesheet !== null){
         //check which stylesheet is active
         if($('link[href="css/dark-theme.css"]').length>0){
               $('link[href="css/dark-theme.css"]').attr('href',localStorage.stylesheet);
         }else if($('link[href="css/light-theme.css"]').length>0){
               $('link[href="css/dark-theme.css"]').attr('href',localStorage.stylesheet);
         }

    }
})

但是，您可以更好地与浏览器兼容。浏览器可能不支持localStorage。

if(typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

带cookie的jQuery样式切换器

1 个答案: