UPDATE
It looks like you want to have 1 stylesheet from each group at a time. And since you use cookies, you will want to save each stylesheet for each group so that the user correctly uses all their settings. I did not understand what your getPreferredStyleSheet() function was getPreferredStyleSheet() , because it just returns the first <link> , which is a stylesheet. If you start with some of the links already included, it seems like you don't need this feature at all. I realized that when you create your cookie, you can simply call getActiveStyleSheets() instead, because it is safe to assume that when a person leaves the page, they configure it the way they like.
In any case, I have edited your functions to allow several styles to set a set from a cookie and to save several stylesheets in order to save them in a cookie. You will need to update your calls because I added the s names to the function names.
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>
<h / "> Here's a short solution for you. I did not spend time optimizing or thinking about another solution, since it was too late, so maybe the best way to do this, but it was too late, and I thought at least least give you something.
HTML Change href attributes to switch and your title attributes to 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 Modify the setActiveStyleSheet function as follows:
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.removeAttribute('href'); } link.href = link.getAttribute('switch'); }
If <link> not referenced in a stylesheet, you cannot have a style. When you click on the <li> element, it passes the identifier of this function, and this function checks if the <link> attribute has a switch attribute, and if it does, it ensures that the href attribute is not set to anything. Now I don’t could say if you want to allow <link> from each class to be activated. If you do, just remove /* */ from the second part of the if statement. If not, you can simply delete this part. In any case, after removing all the href <link> attributes, the <link> with the corresponding identifier has the href attribute for the switch attribute. Thus, he is active, but everything else is not.
As I said, I'm sure there is a better way to do this, but it was easy and late, and I went to bed. Hope this helps.