Question

我的代码存在问题

我正在尝试默认显示1 div（ show_1 ）然后隐藏它并在单击按钮2时显示第二个div（ show_2 ）。然后，当点击按钮1时，隐藏 show_2 并再次显示 show_1

虽然没有用，但当我点击任一按钮时没有任何反应。

function switch_div(show_1, show_2) {
  var a = document.getElementById(show_1);
  var a2 = document.getElementById(show_2);
  if (a.style.display == 'block') {
    a.style.display = 'block';
    a2.style.display = 'none';
  } else {
    a.style.display = 'none';
    a2.style.display = 'block';
  }
}

.button {
  width: 100px;
  height: 30px;
  display: inline-block;
  background-color: black;
  margin: 0 10px 10px 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.button:hover {
  background-color: red;
}
.content {
  width: 400px;
  height: 100px;
  display: block;
  background-color: gray;
}
.hide {
  display: none;
}

<div class="button" onclick="switch_div('show_1', 'show_2');">
  1
</div>
<div class="button" onclick="switch_div('show_1', 'show_2');">
  2
</div>

<div class="content" id="show_1">
  Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
  Show this div when button 2 is clicked
</div>

Answer 1

两个项目：脚本放置和拼写错误。 JSFiddle的工作版本，在Google Chrome中测试过。

脚本必须在divs之前运行。在JSFiddle Javascript设置中，我将“Load Type”更改为“No wrap-in <head>”。这样，switch_div函数在加载div时就存在了。
有一个错字：
```
if (a.style.display == 'block')
```
应该是
```
if (a.style.display == 'none')
```
否则，您要在已经block :)的元素上设置block显示。

编辑：此代码仍然无法显示您想要的内容，因为无论按下哪个按钮，您编写的功能都会切换div可见性。你真正想要的是this fiddle：

<div class="button" onclick="switch_div('show_1', 'show_2', true);">

和

<div class="button" onclick="switch_div('show_1', 'show_2', false);">

与

function switch_div(show_1, show_2, should_show_1) {  
   var a = document.getElementById(show_1);
   var a2 = document.getElementById(show_2);
   if(should_show_1) {
      a.style.display = 'block';             
      a2.style.display = 'none';
   }
   else {
      a.style.display = 'none';            
      a2.style.display = 'block';
   }              
}

这样你只能得到你想要的div。

Answer 2

您在JSFiddle中设置错误，您需要在头部运行脚本而不是onload。你也传递了两次相同的参数。也是为什么你不尝试这样简单的东西。

https://jsfiddle.net/mgzurjgL/5/

function switch_div(show) {  
  document.getElementById("show_"+show).style.display = "block";
  document.getElementById("show_"+((show==1)?2:1)).style.display = "none";
}

.button {
  width: 100px;
  height: 30px;
  display: inline-block;
  background-color: black;
  margin: 0 10px 10px 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.button:hover {
  background-color: red;
}

.content {
  width: 400px;
  height: 100px;
  display: block;
  background-color: gray;
}

.hide {
  display: none;
}

<div class="button" onclick="switch_div(1);">
  1
</div>
<div class="button" onclick="switch_div(2);">
  2
</div>

<div class="content" id="show_1">
  Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
  Show this div when button 2 is clicked
</div>

Answer 3

您需要在if-else中切换语句，或者将if中的条件更改为＆＃34; if（a.style.display！==＆＃39; block＆＃39;）＆＃34;

当a.style.display是＆＃39; block＆＃39;然后你必须把它设置为“没有”＃39;隐藏它。

＆＃13;

function switch_div(show_1, show_2) {
  var a = document.getElementById(show_1);
  var a2 = document.getElementById(show_2);
  if (a.style.display !== 'block') {
    a.style.display = 'block';
    a2.style.display = 'none';
  } else {
    a.style.display = 'none';
    a2.style.display = 'block';
  }
}

＆＃13;

.button {
  width: 100px;
  height: 30px;
  display: inline-block;
  background-color: black;
  margin: 0 10px 10px 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.button:hover {
  background-color: red;
}
.content {
  width: 400px;
  height: 100px;
  display: block;
  background-color: gray;
}
.hide {
  display: none;
}

＆＃13;

<div class="button" onclick="switch_div('show_1', 'show_2');">
  1
</div>
<div class="button" onclick="switch_div('show_1', 'show_2');">
  2
</div>

<div class="content" id="show_1">
  Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
  Show this div when button 2 is clicked
</div>

＆＃13;

Answer 4

我更改了js功能和按钮的“调用”。

function switch_div(show_1, show_2) {  
var a = document.getElementById(show_2);
var a2 = document.getElementById(show_1);
a.style.display = 'none';            
a2.style.display = 'block';            
}

.button {
  width: 100px;
  height: 30px;
  display: inline-block;
  background-color: black;
  margin: 0 10px 10px 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.button:hover {
  background-color: red;
}
.content {
  width: 400px;
  height: 100px;
  display: block;
  background-color: gray;
}
.hide {
  display: none;
}

<div class="button" onclick="switch_div('show_1', 'show_2');">
  1
</div>
<div class="button" onclick="switch_div('show_2', 'show_1');">
  2
</div>

<div class="content" id="show_1">
  Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
  Show this div when button 2 is clicked
</div>

Answer 5

这也适用于：

    <div class="button" onclick="switch_div(1,2);">
    1
    </div>
    <div class="button" onclick="switch_div(2,1);">
    2
    </div>

    <div class="content" id="show_1">
    Show by default (and when button 1 is clicked)
    </div>
    <div class="content hide" id="show_2">
    Show this div when button 2 is clicked
    </div>


    <script>
    function switch_div(n1,n2) {  
        document.getElementById("show_"+n1).style.display = 'block';
        document.getElementById("show_"+n2).style.display = 'none';
    }
    </script>

使用2个按钮切换2个div的可见性

5 个答案: