关于css中显示属性更改的Chrome I JavaScript问题

我一直在使用一些JavaScript来更改我网站的显示属性。它在Firefox和IE上运行良好，但Chrome和Safari根本没有响应。我正在尝试将显示从“无”更改为“块”，或相反。代码如下：

 function setStyleClass (classesOff,classesOn) {
    var classOn;
      if (document.all) {
        for (var s = 0; s < document.styleSheets.length; s++) {
  for (var r = 0; r < document.styleSheets[s].rules.length; r++){
    if (document.styleSheets[s].rules[r].selectorText.indexOf(classesOff,0) > -1) {
        document.styleSheets[s].rules[r].style.display = "none";
        }
      for(var j = 0; j < classesOn.length; j++){
               classOn = classesOn[j];
          if (document.styleSheets[s].rules[r].selectorText == '.' + classOn) {
              document.styleSheets[s].rules[r].style.display = "block";
            }
        }
      }
  }
 }
else if (document.getElementById) {
 for (var s = 0; s < document.styleSheets.length; s++) {
  for (var r = 0; r < document.styleSheets[s].cssRules.length; r++) {
    if (document.styleSheets[s].cssRules[r].selectorText.indexOf(classesOff,0) > -1) {
        document.styleSheets[s].cssRules[r].style.display = "none";
            }
      for(var j = 0; j < classesOn.length; j++){
               classOn = classesOn[j];
        if (document.styleSheets[s].cssRules[r].selectorText == '.' + classOn) {
            document.styleSheets[s].cssRules[r].style.display = "block";
            }
      }
    }
  }
 }
}

其工作方式是关闭名称中带有“book”的任何样式，以及book2、book3和book4。最后两种样式被启用。所以我用另一个不同的列表替换了一个“页面链接列表”。上面的代码在IE和FF中运行良好，但在Chrome和Safari中看不到任何效果。 这些样式都是这样的：

.B4_Link_21_40    {
display:  none;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B4_List_21_40    {
display:  none;
color: #f8fb24;
font : 90% Book Antiqua;
}

我想在单击相应链接时启用这些样式。我的代码中是否有任何明显的错误可能导致这种情况

好的，您已经看到了上面的问题，现在我已经知道如何返回并为您的利益添加html：）

//上面贴的剧本
.第1册{
位置：绝对位置；
左：0px；
顶部：410像素；
宽度：200px；
高度：40px；
显示：块；
}
.第2册{
位置：绝对位置；
左：0px；
顶部：450px；
宽度：200px；
高度：40px；
}
.B1_链接_01_20{
显示：无；
颜色：#f8fb24；
字体：90%古董书；
}
.B1\u列表\u 01\u 20{
显示：块；
颜色：#f8fb24；
字体：90%古董书；
}
.B1_链接_21_40{
显示：块；
颜色：#f8fb24；
字体：90%古董书；
}
.B1\u列表\u 21\u 40{
显示：无；
颜色：#f8fb24；
字体：90%古董书；
}
首先，如果您只是尝试更改链接，那么我将通过
位置：绝对
将不同的链接放置在两个容器中，放置在同一位置，然后我将有一个具有默认样式none的容器。单击按钮后，您甚至不必向方法传递任何内容，因为您只处理2个容器，并且您知道它们的id

然后，不用遍历样式表，只需使用
document.getElementById（'container_1'）。style.display='block'
document.getElementById（'container_2'）。style.display='none'

只要容器是块级别（如div），这将更改其在每个浏览器中的显示特性

如果您想通过更改它们的类名来实现这一点，那么您可以这样做

function changeStyles(){
    document.getElementById('container_1').className = 'classOn';
    document.getElementById('container_2').className = 'classOff';
    //rest of your javascript
}

*这仍然是假设您使用两个容器，而不是尝试更改每个链接的单独样式

编辑：

因此，不知道您实际拥有的html是什么使得回答您的评论变得更加困难，但接下来是

您的html可能如下所示：

<div class='classOn' id='container_1'>
    <a href='some_link'>some link</a>
    <a href='some_link2'>some link2</a>
    <a href='some_link3'>some link3</a>
    <a href='some_link4'>some link4</a>
</div>
<div class='classOff' id='container_2'>
    <a href='different_link'>different link</a>
    <a href='different_link2'>different link2</a>
    <a href='different_link3'>different link3</a>
    <a href='different_link4'>different link4</a>
</div>
<button onclick='changeStyles()>See new Links!</button>

请注意，两个类如何具有完全相同的边距，因为绝对位置属性，它们可以具有相同的边距。它有效地占用了他们将要使用的页面空间。现在，当按下按钮调用函数
changeStyles（）
时，第一个div被隐藏，第二个div显示，新链接位于完全相同的位置。希望有帮助

好的，我上面的例子可以很好地处理你刚才所做的
class='classOn'
你的
B1\u列表\u 01\u 20'
和
class='classOff'
你的
B1\u链接\u 21\u 40'
并使用上面的函数，它应该可以在它们之间切换。
1。您没有使用JQuery，这将使您的代码最多占用5行。2.您的
else if
有一个未向其传递任何
id
的。3.您的
onclick
函数调用正在传递一个结束的
]
，就像它是一个数组一样，但是没有开始的括号！4.您传递的参数比函数接受的参数多，因此任何超过第二个参数的参数都会被自动丢弃。要么根据@ryan重写代码，要么向我们展示一些html。谢谢Fabrico。我根本不是一个程序员，所以我没有使用JQuery的经验。我同意你的观点，希望有更简单的代码。回到我的代码，开始[似乎已在本论坛的副本中删除。开始括号都在那里。这样，我将传递1个参数以关闭，并传递一个列表以打开。很高兴显示html，将在下面添加它。感谢您的兴趣。是的，在问题中添加一些html，它将自动将您的问题添加到顶部。：PThank you Ryan.I我的Javascript不是很流利，所以你的方法看起来很好，很简单，这很好。我实际上有几个“列表”，将被放入容器中。我并不完全按照您的示例更改名称，以及每次调用后的所有css。我将添加一些html，以提供我目前拥有的更完整的代码示例。感谢您的帮助。@MarkBahlke更新了答案以尝试回答您的评论。嗨，Ryan，我正在尝试处理您的建议n、 还有一些困难。我肯定是我。困难在于用我的其余内容填补你建议的空白。我的总体“系统”比我给出的例子要大。当然，我有4本“书”，每个都有一长串指向我希望一次显示20个链接的内容的链接。我试图了解如何根据您在这里的内容将不同的容器或对象放入此方案中。我还看到您正在使用我没有使用的“id”。请您再为我填几个空格好吗？
function changeStyles(){
    document.getElementById('container_1').className = 'classOn';
    document.getElementById('container_2').className = 'classOff';
    //rest of your javascript
}

<div class='classOn' id='container_1'>
    <a href='some_link'>some link</a>
    <a href='some_link2'>some link2</a>
    <a href='some_link3'>some link3</a>
    <a href='some_link4'>some link4</a>
</div>
<div class='classOff' id='container_2'>
    <a href='different_link'>different link</a>
    <a href='different_link2'>different link2</a>
    <a href='different_link3'>different link3</a>
    <a href='different_link4'>different link4</a>
</div>
<button onclick='changeStyles()>See new Links!</button>

.classOn{
     display: block;
     position:absolute;
     margin: 10px 10px 10px 10px;
     //rest of your css
}
.classOff{
    display: none;
    position: absolute;
    margin: 10px 10px 10px 10px;
    //rest of your css
}