1

我一直在使用一些 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";
            }
      }
    }
  }
 }
}

当它被调用时，它会给出一个要关闭的样式 ID 列表，以及要“打开”的样式。这是电话：

 onClick="setStyleClass('book','book2_nl','book3_nl','book4_nl','B1_List_01_20','B1_Link_21_40']);

其工作方式是“关闭”任何名称中带有“book”的样式，以及 book2_nl、book3_nl 和 book4_nl。最后两种样式被“打开”。因此，我将一个“页面链接列表”替换为另一个不同的列表。上面的代码在 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 :)

<html>
<head></head>
<title></title>
<script> //the script posted above </script>
<style>
.book1 {
    position: absolute;
    left:0px;
    top:410px;
    width:200px;
    height:40px;
    display: block;
}
.book2 {
    position:absolute;
    left:0px;
    top:450px;
    width:200px;
    height:40px;
}
.B1_Link_01_20 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_List_01_20 {
display: block;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_Link_21_40    {
display:  block;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_List_21_40    {
display:  none;
color: #f8fb24;
font : 90% Book Antiqua;
}

</style>

<div align="justify" align="center" class="mainBody"
<p>Here's some content...</p>
</div>

<div class="book1">
    <a href="#" target="_self"
    onClick="setStyleClass('book',['B1_List_01_20','B1_Link_21_40']);
    switchStyleClass('B2_Li');
    onMouseOut="window.status=''; return true;">
    </a>
</div>
<div class="book2">
    <a href="#" target="_self"
    onClick="setStyleClass('book',['B2_List_01_20','B2_Link_21_40']);
    switchStyleClass('B1_Li');
    onMouseOut="window.status=''; return true;">
    </a>
</div>

<div class="B1_List_01_20">
<a href=Link To Page 1.shtml>1. Link To Page 1</a><br>
<a href=Link To Page 2.shtml>2. Link To Page 2</a><br>
<br></div>
<div class="B1_List_21_40">
<a href=Link To Page 21.shtml>21. Link To Page 21</a><br>
<a href=Link To Page 22.shtml>22. Link To Page 22</a><br>
<br></div>

<div class="B1_Link_01_20">
<a ONCLICK="setStyleClass('B1_Li',['B1_List_01_20','B1_Link_21_40']);" href="#">List of Links 1 - 20</a><br><br>
</div>

<div class="B1_Link_21_40">
<a ONCLICK="setStyleClass('B1_Li',['B1_List_21_40','B1_Link_01_20','B1_Link_41_60']);" href="#">List of Links 21 - 40</a><br><br>
</div>

</html>
4

1 回答 1

2

首先，如果您只是想更改链接，那么我会将不同的链接放在位于同一位置的 2 个容器中，position: absolute然后我将拥有一个默认样式为 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>

然后你的CSS：

.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
}

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

好的，所以我上面的示例适用于您刚刚制作class='classOn'并class='B1_List_01_20'制作并使用上面class='classOff'的class='B1_Link_21_40'功能，它应该在它们之间切换就好了。

于 2012-05-22T01:47:26.937 回答