Plusieurs feuilles de style – désactivez uniquement le groupe spécifique

METTRE À JOUR
Il semble que vous souhaitiez avoir 1 feuille de style active de chaque groupe à la fois. Et puisque vous utilisez des cookies, vous voudrez pouvoir enregistrer chaque feuille de style par groupe afin qu'un utilisateur ait tous ses paramètres corrects. Je n'ai pas compris la fonction de votre fonction getPreferredStyleSheet() , car elle renvoie simplement le premier <link> qui est une feuille de style. Si vous commencez avec certains liens déjà activés, il semble que vous n'avez pas besoin de cette fonction. J'ai pensé que lorsque vous créez votre cookie, vous pouvez simplement appeler getActiveStyleSheets() place, car il est prudent de supposer que lorsque la personne quitte la page, elle la configure comme elle l'aime.

Quoi qu'il en soit, j'ai modifié vos fonctions pour permettre la sélection de plusieurs feuilles de style à partir d'un cookie et pour enregistrer plusieurs feuilles de style pour être sauvegardées dans un cookie. Vous devrez mettre à jour vos appels parce que j'ai ajouté un s aux noms de fonctions.

JavaScript

 ​function setActiveStyleSheets(ids){ ids = ids.split(','); var i, j, l, link; for(i=0; (link = document.getElementById(ids[i])); i++){ for(j=0; (l = document.getElementsByTagName('link')[j]); j++){ if(l.hasAttribute('switch') && l.className.indexOf(link.className) !== -1) l.removeAttribute('href'); } link.href = link.getAttribute('switch'); } } function getActiveStyleSheets(){ var i, link, active = []; for(i=0; (link = document.getElementsByTagName('link')[i]); i++){ if(link.hasAttribute('switch') && link.href){ active.push(link.id); } } return active.join(','); } function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var i, c, ca = document.cookie.split(';'); for(i=0; (c = ca[i]); i++) { while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } window.onload = function(e) { var cookie = readCookie("style"); var title = cookie || getActiveStyleSheets(); setActiveStyleSheets(title); } window.onunload = function(e) { var title = getActiveStyleSheets(); createCookie("style", title, 365); } 

HTML

 <link href="/files/theme/body1.css" switch="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" id="body1" /> <link switch="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" id="body2" /> <link switch="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" id="body3" /> <link href="/files/theme/para1.css" switch="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" id="para1" /> <link switch="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" id="para2" /> <link switch="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" id="para3" /> ... <ul> <li> <a href="#" onclick="setActiveStyleSheets('body1'); return false;">body1</a> </li> <li> <a href="#" onclick="setActiveStyleSheets('body2'); return false;">body2</a> </li> <li> <a href="#" onclick="setActiveStyleSheets('body3'); return false;">body3</a> </li> <li> <a href="#" onclick="setActiveStyleSheets('para1'); return false;">para1</a> </li> <li> <a href="#" onclick="setActiveStyleSheets('para2'); return false;">para2</a> </li> <li> <a href="#" onclick="setActiveStyleSheets('para3'); return false;">para3</a> </li> </ul> 

Voici une solution rapide pour vous. Je n'ai pas passé de temps à optimiser ou à penser à une autre solution car il est en retard, donc il y a probablement une meilleure façon de le faire, mais il est en retard et je pensais au moins vous donner quelque chose.

HTML – Modifiez vos attributs href pour switch et vos attributs de title sur id

 <link switch="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" id="body1" /> <link switch="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" id="body2" /> <link switch="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" id="body3" /> <link switch="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" id="para1" /> <link switch="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" id="para2" /> <link switch="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" id="para3" /> 

JavaScript – Modifiez la fonction setActiveStyleSheet à ceci:

 function setActiveStyleSheet(id){ var i, l; var link = document.getElementById(id); for(i=0; (l = document.getElementsByTagName('link')[i]); i++){ if(l.hasAttribute('switch') /*&& l.className.indexOf(link.className) !== -1*/) l.removeAttribute('href'); } link.href = link.getAttribute('switch'); } 

Si le <link> n'est pas indiqué sur la feuille de style, vous ne pouvez pas avoir le style. Lorsque vous cliquez sur un élément <li> , il passe l'ID à cette fonction et cette fonction vérifie si le <link> a l'attribut switch et s'il le fait, il s'assure que l'attribut href est défini à rien. Maintenant, je ne pouvais pas tout à fait dire si vous vouliez autoriser un <link> de chaque classe à être activé. Si vous le faites, supprimez simplement le /* */ de la deuxième partie de l'instruction if. Sinon, vous pouvez simplement supprimer cette partie. Quoi qu'il en soit, après tous les liens, les attributs href sont supprimés, le <link> avec l'identifiant correspondant a son attribut href défini sur son attribut de switch . Donc, il est actif alors que tous les autres ne le sont pas.

Comme je l'ai dit, je suis sûr qu'il y a une meilleure façon de le faire, mais c'était facile, il est tard et je vais au lit. J'espère que cela t'aides.