那些遇到过的问题

多个样式表 - 仅禁用特定组

And*_*son 7 html javascript css

我有一个主样式表,有两组备用样式表.当激活一个样式表时,备用的两组样式表都将被禁用.主样式表是持久的,永远不会被禁用.备用样式表仅包含从主样式表中取出的不同元素,并且仅在激活时实现.我添加了具有两个组的类,以查看是否可以在组内激活一个组并在该组中停用其他组而不在另一个组中停用.我已经尝试了许多其他样式切换器和jquery方法,我没有任何地方,这是最好的结果呢.我真的很擅长这一切,并希望得到任何帮助. 

<!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>
Run Code Online (Sandbox Code Playgroud)

来自http://www.alistapart.com/articles/alternate/的styleswitcher.js文件

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);
Run Code Online (Sandbox Code Playgroud)

原始样式表选择器

<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>
Run Code Online (Sandbox Code Playgroud)

如果有可能以另一种考虑正确方式的方式来解决这个问题,我很乐意指出这个方向来解决这个问题.如果没有,我仍然想知道这是否有可能与我所拥有的,我猜的教训.谢谢.

Aus*_*ust 3

更新
\n听起来您希望能够一次从每个组中激活 1 个样式表。由于您使用的是 cookie，您将希望能够保存每个组的每个样式表，以便用户的所有设置都正确。我不明白你的getPreferredStyleSheet()函数的用途，因为它只是返回第一个<link>样式表。如果您开始时已经打开了一些链接，那么您似乎根本不需要该功能。我认为，当您创建 cookie 时，您可以直接调用getActiveStyleSheets()，因为可以安全地假设，当用户离开页面时，他们会按照自己喜欢的方式进行设置。

\n\n

不管怎样，我编辑了你的函数，以允许从 cookie 设置多个样式表，并保存多个样式表以保存在 cookie 中。您必须更新您的调用，因为我s在函数名称中添加了 。

\n\n

JavaScript

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

超文本标记语言

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

\n这是为您提供的快速解决方案。我没有花任何时间优化或考虑另一个解决方案，因为已经晚了，所以可能有更好的方法来做到这一点，但已经晚了，我想我至少会给你一些东西。

\n\n

HTML - 将您的href属性更改为switch并将您的title属性更改为id

\n\n
<link switch="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" id="body1" />\n<link switch="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" id="body2" />\n<link switch="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" id="body3" />\n\n<link switch="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" id="para1" />\n<link switch="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" id="para2" />\n<link switch="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" id="para3" />\n
Run Code Online (Sandbox Code Playgroud)\n\n

JavaScript - 将您的setActiveStyleSheet函数更改为：

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

如果<link>没有指向样式表，那么您就无法拥有样式。当您单击某个<li>项目时，它会将 id 传递给此函数，此函数会检查该项目是否<link>具有该switch属性，如果有，则确保该href属性设置为空。现在我不太清楚你是否想允许<link>激活每个类中的一个。/* */如果这样做，只需从 if 语句的第二部分中删除。如果没有，那么您可以删除该部分。href无论如何，在删除所有链接属性后，<link>具有相应 id 的链接将其href属性设置为其switch属性。所以它是活跃的，而其他所有的都不是活跃的。

\n\n

就像我说的，我确信有更好的方法可以做到这一点，但这很简单，而且已经很晚了，我要去睡觉了。希望这可以帮助。

\n

归档时间：

查看次数：

1144 次

最近记录：

13 年，8 月 前
相关归档
如何使用jQuery将文本复制到客户端的剪贴板？ 190
如何自动裁剪和居中图像 145
css标签宽度未生效 104
为什么字体颜色属性中的怪异东西会产生真实的颜色？ 54
如何使用JavaScript生成一个固定长度的随机数？ 49
如何在Markdown中设置HTML类属性？ 46
将日期输入字段的最大日期设置为今天 35
如何在提交按钮中设置背景图像？ 24
使用css打印之前缩放html表 21
什么是style.css？ver = 1标签？ 18
难疑归档
将本地存储库分支重置为远程存储库HEAD 3488
何时在Java中使用LinkedList而不是ArrayList？ 2974
我是否施放了malloc的结果？ 2318
'using'指令应该在命名空间的内部还是外部？ 1975
在SQL表中查找重复值 1789
每个'循环的Java'如何工作？ 1446
什么是monad？ 1373
如何重置MySQL中的AUTO_INCREMENT？ 1174
在HTML中嵌入PDF的推荐方法？ 1128
如何配置Visual Studio代码以始终在新选项卡中打开文件？ 1078