多个样式表 - 仅禁用特定组 [英] Multiple style sheets - only disable specific group
问题描述
我有一个主样式表，有两组备用样式表。备用的两组样式表在激活时都禁用。主样式表是持久的，从不禁用。替换样式表仅包含从主样式表中取出的不同元素，并且仅在激活时才实现。我添加了两个组的类，看看我是否可以完成激活组中的一个，并停用该组中的其他人，而不是任何其他组。 Ive尝试了许多其他样式切换器和jquery方法，我没有在任何地方，这是最好的结果。我真的很新的所有这一切，将欣赏任何帮助。
I have a main stylesheet with two groups of alternate stylesheets. The alternate two groups of stylesheets are all disable when one is activated. The main stylesheet is persistent and never disabled. The alternate stylesheets only contain different elements taken out of the main stylesheet and only implemented when activated. I added the class with the two groups to see if I could accomplish activating one inside a group and deactivating the others in that group but not any in the other group. Ive tried many other styler switchers and jquery methods and I have not got anywhere, this is the best result yet. Im really new to all this and would appreciate any help.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="/files/theme/mainstyle.css" rel="stylesheet "type="text/css"/>
<link href="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" title="body1" />
<link href="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" title="body2" />
<link href="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" title="body3" />
<link href="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" title="para1" />
<link href="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" title="para2" />
<link href="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" title="para3" />
<script type="text/javascript" src="/files/theme/styleswitcher.js"></script>
</head>
来自 http://www.alistapart.com/articles/alternate/
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
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 ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[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 ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
粗体样式表选择器
<ul>
<li> <a href="#"
onclick="setActiveStyleSheet('body1');
return false;">body1</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('body2');
return false;">body1</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('body3');
return false;">body3</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('para1');
return false;">para1</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('para2');
return false;">para2</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('para3');
return false;">para3</a></li>
</ul>
如果它可能用另一种方式去考虑正确的方式，我很想指出了这个方向来计算出来。如果不是，我仍然想知道如果这是可能与我有，学习课我猜。感谢。
If its possible to go about this in another way that considered the correct way, I would love to be pointed in that direction to figure it out. If not, I would still love to know if this is possible with what I have , learning lesson I guess. Thanks.
推荐答案
UPDATE
听起来你想能够一次从每个组中有1个样式表。由于您使用的是Cookie，因此您希望能够为每个组保存每个样式表，以便用户能够正确设置所有设置。我不明白你的 getPreferredStyleSheet（）函数是因为它只是返回第一个< link> 这是一个样式表。如果你开始一些链接已经打开，似乎你不需要这个功能。我想，当你创建你的cookie，你可以调用 getActiveStyleSheets（），因为它是安全的假设，当人离开的页面，他们设置他们喜欢的方式。
UPDATE
It sounds like you want to be able to have 1 stylesheet active from each group at a time. And since you're using cookies, you'll want to be able to save each stylesheet per group so a user will have all of their settings correct. I didn't understand what your getPreferredStyleSheet() function was for, because it just returns the first <link> that is a stylesheet. If you are starting with some links already turned on, it seems like you don't need that function at all. I figured that when you are creating your cookie, you could just call getActiveStyleSheets() instead because it's safe to assume that when the person is leaving the page, that they set it up the way they like it.
无论如何我编辑了函数，允许多个样式表从一个cookie中设置，并保存多个样式表以保存在一个cookie中。您必须更新通话，因为我向
Anyways I edited your functions to allow multiple stylesheets to get set from a cookie, and to save multiple stylesheets to get saved in a cookie. You'll have to update your calls because I added an s to the function names.
JavaScript添加了 s
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>
这里是一个快速修复。我没有花任何时间优化或想到另一个解决方案，因为它晚了，所以可能有一个更好的方法这样做，但是晚了，我想我至少给你一些。
Here is a quick fix for you. I didn't spend any time optimizing or thinking of another solution since it's late so there's probably a better way of doing this but it's late and I thought I'd at least give you something.
HTML - 将您的 href 属性更改为切换和您的< c $ c> title 属性为 id
HTML - Change your 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 - 更改 setActiveStyleSheet function to this：
JavaScript - Change your setActiveStyleSheet function to this:
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');
}
如果< link> 没有指向样式表，那么你不能有样式。当您点击< li> 项目时，它将id传递给此函数，此函数检查< link> 具有开关属性，如果是，它确保 href 属性设置为无。现在我不能完全告诉你是否允许激活每个类的< link> 。如果你这样做，只需从if语句的第二部分中删除 / * * / 。如果没有，那么你可以只删除该部分。无论如何，在所有链接 href 属性被删除后，< link> code> href 属性设置为开关属性。所以它是活跃的，而其余的都不是。
If the <link> is not pointed to the stylesheet, then you can't have the styling. When you click on a <li> item, it passes the id to this function and this function checks if the <link> has the switch attribute and if it does, it makes sure there the href attribute is set to nothing. Now I couldn't quite tell if you wanted to allow a <link> from each class to be activated. If you do, just remove the /* */ from the second part of the if statement. If not, then you can just delete that part. Anyways, after all of the links href attributes are removed, the <link> with the corresponding id has it's href attribute set to it's switch attribute. So it is active while all of the rest are not.
像我说的，我敢肯定有一个更好的方法来做到这一点，但这是很容易，它晚了，我去睡觉了。希望这有助于。
Like I said I'm sure there's a better way to do this, but this was easy and it's late and I'm going to bed. Hope this helps.
这篇关于多个样式表 - 仅禁用特定组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
