Question

我的页面应该基于单击按钮来隐藏/显示div。此行为在chrome中正常工作，但在其他浏览器中无法正常工作。

我的JavaScript为每个按钮的点击添加了一个事件监听器。事件侦听器调用一个函数来更改3个div中每个div的className。根据单击的按钮，div可以获得invisible或visible类。

为了进行测试，我上传了一个javascript代码段alert(left_box.className); 正确警告我交替content-box visible＆amp; content-box invisible。所以规则正在发生变化。只是这些改变的CSS规则在Firefox和IE中并不显示。

帮助！

var button_1 = document.getElementById('button-1');
var button_2 = document.getElementById('button-2');
var button_3 = document.getElementById('button-3');


var left_box = document.getElementById('left-box');
var center_box = document.getElementById('center-box');
var right_box = document.getElementById('right-box');


function one_clicked() {
    
    if (left_box.className == "content-box visible") {
        left_box.className = "content-box invisible"}
    else {
    
        left_box.className = "content-box visible";
    
        center_box.className = "content-box invisible";
        right_box.className = "content-box invisible";
        }
    alert(left_box.className);
};

function two_clicked() {
    
    if (center_box.className == "content-box visible") {
        center_box.className = "content-box invisible"}
    else {
        center_box.className = "content-box visible";
    
        left_box.className = "content-box invisible";
        right_box.className = "content-box invisible";
    }
    alert('hello');
};

function three_clicked() {
    
    if (right_box.className == "content-box visible") {
        right_box.className = "content-box invisible"
    }
    else {
    right_box.className = "content-box visible";
    
    center_box.className = "content-box invisible";
    left_box.className = "content-box invisible";
        }
    alert('fuckkkkkk');
};

button_1.addEventListener('click',one_clicked, false);
button_2.addEventListener('click',two_clicked, false);
button_3.addEventListener('click',three_clicked, false);

body {
    margin:0px;
    background-color:coral;
    padding:3%;
}

.main-box {
    background-color:cornflowerblue;
    height:75%;
    
}

.main-row {
    margin-top:3%;
    margin-bottom:3%;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    
}

button {
    height:7%;
    width:25%;
    
}

.content-container{
    display:flex;
    justify-content:space-between;
}
.content-box {
    width:25%;
    height:80%;
    background-color:bisque;
    border-radius:10%;
}


.visible {
    height:180%;
    width:150%;
}

.invisible {
    height:0.1px;
    background-color:transparent;
}


.footer{
    margin:0px;
}

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="expansion.css"></link>
        <title>Expansion</title>
        <meta charset="utf-8"/>
    </head>
    
    <body>
        
        <div class="main-box"></div>
        
        <div class="main-row">
            <button id="button-1">1</button>
    
            <button id="button-2">2</button>
            
            <button id="button-3">3</button>
        
        </div>
        
        <div class="content-container">
            
            
        
            <div class="content-box visible" id="left-box"></div>

            <div class="content-box invisible" id="center-box"></div>

            <div class="content-box invisible" id="right-box"></div>      
        
        </div>
        
         
<!--
        
        <footer>Footer</footer>
-->
     <script src="expansion.js"></script>
                

    </body>
</html>

Answer 1

您的代码按预期工作。因为div中没有任何内容，所以它完全崩溃了，你无法看到它。您会注意到，一旦我放入了一个范围，并将background-color更改为display，它们会按预期显示。

var button_1 = document.getElementById('button-1');
var button_2 = document.getElementById('button-2');
var button_3 = document.getElementById('button-3');


var left_box = document.getElementById('left-box');
var center_box = document.getElementById('center-box');
var right_box = document.getElementById('right-box');


function one_clicked() {

  if (left_box.className == "content-box visible") {
    left_box.className = "content-box invisible"
  } else {

    left_box.className = "content-box visible";

    center_box.className = "content-box invisible";
    right_box.className = "content-box invisible";
  }
  console.log('Left Box');
};

function two_clicked() {

  if (center_box.className == "content-box visible") {
    center_box.className = "content-box invisible"
  } else {
    center_box.className = "content-box visible";

    left_box.className = "content-box invisible";
    right_box.className = "content-box invisible";
  }
  console.log('Center Box');
};

function three_clicked() {

  if (right_box.className == "content-box visible") {
    right_box.className = "content-box invisible"
  } else {
    right_box.className = "content-box visible";

    center_box.className = "content-box invisible";
    left_box.className = "content-box invisible";
  }
  console.log('Right Box');
};

button_1.addEventListener('click', one_clicked, false);
button_2.addEventListener('click', two_clicked, false);
button_3.addEventListener('click', three_clicked, false);

body {
  margin: 0px;
  background-color: coral;
  padding: 3%;
}
.main-box {
  background-color: cornflowerblue;
  height: 75%;
}
.main-row {
  margin-top: 3%;
  margin-bottom: 3%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
button {
  height: 7%;
  width: 25%;
}
.content-container {
  display: flex;
  justify-content: space-between;
}
.content-box {
  width: 25%;
  height: 80%;
  background-color: bisque;
  border-radius: 10%;
}
.visible {
  height: 180%;
  width: 150%;
  background-color: red;
}
.invisible {
  height: 0.1px;
  display: none;
}
.footer {
  margin: 0px;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="expansion.css"></link>
  <title>Expansion</title>
  <meta charset="utf-8" />
</head>

<body>

  <div class="main-box"></div>

  <div class="main-row">
    <button id="button-1">1</button>

    <button id="button-2">2</button>

    <button id="button-3">3</button>

  </div>

  <div class="content-container">



    <div class="content-box visible" id="left-box">

      <span>Left Box!</span>
    </div>

    <div class="content-box invisible" id="center-box"><span>Middle Box!</span>
    </div>

    <div class="content-box invisible" id="right-box"><span>Right Box!</span>
    </div>

  </div>


  <!--
        
        <footer>Footer</footer>
-->
  <script src="expansion.js"></script>


</body>

</html>

另请注意，不要使用alert，最好使用console.log。

CSS规则随着Javascript而改变 - 效果在chrome中可见但不是ff或ie

1 个答案: