点击显示'Div 1'并隐藏'Div 2'＆点击同样的按钮显示'Div 2'并隐藏'Div 1'？

Question

我可以用不同的按钮来做这个功能。但我不能通过点击相同的按钮来实现这一点。

使用ternary-operator

使用Element.style.display任何帮助/建议

感谢

Answer 1

• 切换当前元素设置display CSS 财产

var btn = document.getElementById('btn'); 
 
var curr = 'div2'; 
 
btn.onclick = function() { 
 
    document.getElementById(curr).style.display = 'none'; 
 
    curr = curr === 'div2' ? 'div1' : 'div2'; 
 
    document.getElementById(curr).style.display = 'block'; 
 
};

div { 
 
    display: none; 
 
}

<div id="div1">#div1</div> 
 
<div id="div2">#div2</div> 
 
<button id='btn'>Change</button>

Answer 2

任何这样的事情？

function divchange(){ 
 
    div1 = document.getElementById("div1"); 
 
    div2 = document.getElementById("div2"); 
 
    if(div1.style.display == "none"){ 
 
    div1.style.display = "block"; 
 
    div2.style.display = "none"; 
 
    }else{ 
 
    div1.style.display = "none"; 
 
    div2.style.display = "block"; 
 
    } 
 
}

<button id="divchangebutton" onclick="divchange();">test</button> 
 
<div id="div1">asdf</div> 
 
<div id="div2" style="display:none;">qwert</div>

Answer 3

问题 - 如果 “显示：无” 套在CSS中，我们不能得到的价值。 “elem.style.display”返回空字符串。 我们可以使用Computed Style来解决这个问题。

 var btn = document.getElementById("btn-toggle"); 
 
     btn.addEventListener("click", function(){ 
 
      var one = document.querySelector(".one"); 
 
      var tow = document.querySelector(".tow"); 
 
      
 
      one.style.display = (getRealDisplay(one) == 'none') ? 'block' : 'none'; 
 
      tow.style.display = (getRealDisplay(tow) == 'none') ? 'block' : 'none'; 
 
     }); 
 
     
 
     // get real value of 'display' property 
 
     function getRealDisplay(elem) { 
 
      if (elem.currentStyle) { 
 
       return elem.currentStyle.display; 
 
      } else if (window.getComputedStyle) { 
 
       var computedStyle = window.getComputedStyle(elem, null); 
 
       return computedStyle.getPropertyValue('display'); 
 
      } 
 
     }

 .one, .tow{ 
 
      width:200px; 
 
      min-height: 200px; 
 
      background-color:burlywood; 
 
     } 
 
     .tow{ 
 
      display: none; 
 
      background-color:cadetblue; 
 
     }

<div class="one">1</div> 
 
    <div class="tow">2</div> 
 
    <button id="btn-toggle">show hide</button>