1

JavaScript を使用して、Web サイトの表示プロパティを変更しています。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 を「オフ」にすることです。最後の 2 つのスタイルは「オン」になります。そのため、「ページへのリンクのリスト」を別の別のリストに置き換えています。上記のコードは 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、デフォルトのスタイルがないものを作成します。ボタンがクリックされた場合、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
}

*これは、すべてのリンクの個々のスタイルを変更しようとするのではなく、2つのコンテナを使用することを前提としています

編集：

したがって、実際にどの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が非表示になり、2番目のdivがまったく同じ位置に新しいリンクとともに表示されます。それがお役に立てば幸いです。

さて、上記の私の例は、あなたが作成したものでうまくclass='classOn'機能class='B1_List_01_20'し、上記の関数を使用しclass='classOff'てclass='B1_Link_21_40'、それらをうまく切り替える必要があります。

于 2012-05-22T01:47:26.937 に答える