堆栈内存溢出
  繁体   English   中英

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

[英]Toggle visibility of 2 divs with 2 buttons

 原文  2016-02-03 16:31:15  1   5    javascript

问题描述

我的代码有问题

我试图默认显示1 div（ show_1 ），然后单击按钮2时将其隐藏并显示第二个div（ show_2 ）。 然后单击按钮1时，隐藏show_2 ， 然后再次显示show_1

https://jsfiddle.net/mgzurjgL/4/

虽然它不起作用，但是当我单击任何一个按钮时都没有任何反应。 

 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>

5 个解决方案

解决方案1
 2  2016-02-03 16:44:19

两项：脚本放置和错字。 JSFiddle的工作版本， 已在Google Chrome中测试。

  1. 该脚本必须在divs之前运行。 在JSFiddle Javascript设置中，我将“ Load Type”更改为“ No wrap-in <head> 。 这样，在加载div时，存在switch_div函数。

  2. 有一个错字： 

     if (a.style.display == 'block')

    应该 

     if (a.style.display == 'none')

    否则，您将在已经被block的元素上设置block显示:)。

编辑 ：此代码仍然无法满足您的期望，因为您编写的函数会切换div可见性，而与按下哪个按钮无关。 您真正想要的是这个小提琴 ： 

<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 。

解决方案2
 2 已采纳  2016-02-03 16:46:26

在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>

解决方案3
 0  2016-02-03 16:45:24

您需要在if-else中切换语句或将if中的条件更改为“ if（a.style.display！=='block'）”

当a.style.display为'block'时，您必须将其设置为'none'才能隐藏它。 

 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>

解决方案4
 0  2016-02-03 16:49:46

我更改了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>

解决方案5
 0  2016-02-03 17:00:39

这也适用于： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 一次切换两个div的可见性 切换三个或更多div的可见性 在JavaScript中切换Divs的可见性 javascript切换多个Divs的可见性 Javascript切换可见性的多个div 需要切换2个DIV的DIV可见性 切换可见性多个divs javascript HTML div切换可见性不起作用 在多个div之间切换可见性 Bootstrap5 模态必须切换 div 的可见性
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM