Question

我可以使用不同的按钮执行此功能。但是我点击相同的按钮就无法实现这一点。

任何帮助/建议

由于

Answer 1

使用ternary-operator
使用Element.style.display设置display css 属性

＆＃13;

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';
};

＆＃13;

div {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

这样的事吗？

    btnUsingEkyc.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // start your main screen
            handler.removeCallbacks(runnable);
        }
    });

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";
  }
}

Answer 3

问题 - 如果＆＃34;显示：无＆＃34;在css中设置，我们无法获得价值。＆＃34; elem.style.display＆＃34;返回空字符串。我们可以使用Computed Style来解决它。

＆＃13;

        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');
            } 
        }

＆＃13;

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

＆＃13;

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

＆＃13;

点击显示＆lt; Div 1＆＃39; ＆安培;隐藏＆＃39; Div 2＆＃39; ＆安培;点击相同的按钮显示＆＃39; Div 2＆＃39;并隐藏＆＃39; Div 1＆＃39;？

3 个答案: