带按钮的 TOGGLE 2 DIVS（使用 Javascript、HTML 和 CSS）答案

【问题标题】：TOGGLE 2 DIVS with a Button (Using Javascript, HTML and CSS)带按钮的 TOGGLE 2 DIVS（使用 Javascript、HTML 和 CSS）
【发布时间】：2017-02-03 04:16:42
【问题描述】：

基本上我有 2 个 div，里面都有不同的内容，我想用一个按钮在它们之间切换。

我的 2 个 div 分别带有“step1Content”和“step2Content”类。

<div class = 'step1Content'> Content1 </div>
<div class = 'step2Content'> AnotherContent </div>

我给 step1Content 的样式 display: block.

.step1Content { display: block; }

我给 step2Content 的样式显示：无。

.step2Content { display: none; }

我有一个按钮可以在这两者之间切换以显示或隐藏。

<button onclick = 'step2()'>2. Taskeros and Prices</button>

还有我的 javascript 函数：

function step2(){
document.getElementByClassName('step1Content').style.display = 'none';
document.getElementByClassName('step2Content').style.display = 'block';
}

你会认为结果没问题吧？不，当我单击按钮时，它实际上什么也没做。我不知道为什么，有什么帮助吗？

【问题讨论】：

使用来自 jquery 的切换：api.jquery.com/toggle
w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

标签： javascript html css

【解决方案1】：

请记住

getElementsByClassName

将返回文档中具有指定类名的所有元素的集合，作为 NodeList 对象。

您可以使用 getElementById 或 querySelector

这是一个可行的解决方案。希望对您有所帮助！

function step2(){
        if(document.querySelector('.step1Content').style.display === "none"){
            document.querySelector('.step2Content').style.display = 'none';
            document.querySelector('.step1Content').style.display = 'block';
        }else{
            document.querySelector('.step1Content').style.display = 'none';
            document.querySelector('.step2Content').style.display = 'block';
        }
    }

.step1Content { display: block; }
.step2Content { display: none; }

<button onclick = 'step2()'>2. Taskeros and Prices</button>
<div class= 'step1Content'> Content1 </div>
<div class = 'step2Content'> AnotherContent </div>

【讨论】：

【解决方案2】：

该函数是getElementsByClassName 而不是getElementByClassName，它返回array-like 元素集合。所以你需要在这里为第一个元素使用索引0。

function step2(){
  
 var element=document.getElementsByClassName('step1Content');
element[0].style.display = (element[0].style.display ==='none') ? 'block' : 'none';
 var element1= document.getElementsByClassName('step2Content');
  element1[0].style.display = (element1[0].style.display ==='block') ? 'none' : 'block';
}

.step1Content { display: block; }
.step2Content { display: none; }

<div class = 'step1Content'> Content1 </div>
<div class = 'step2Content'> AnotherContent </div>

<button onclick = 'step2()'>2. Taskeros and Prices</button>

【讨论】：

.getElementsByClassName 返回HTMLCollection
HTMLCollection 不是Array。另请注意，div 元素 display 不会在 click button @Answer 上切换。
@guest271314 是的，我的意思是“类似数组”的元素集合。

【解决方案3】：

如果你想切换 div 的可见性，那么你可以使用 j-query 切换功能。请阅读http://api.jquery.com/toggle/

$("button").click(function(){
    $("#shay").toggle();
});

用于切换两个 div -

CSS - .show { display: block; } .hide { display: none; }

    $("button").click(function(){
      $('#div1').toggle();
      $('#div2').toggle();
    });

</script>
<body>
<div class="hide" id="div1">Hi Div1</div>
<div class="show" id="div2">Hi Div2</div>
<button>Click me</button>

【讨论】：

【解决方案4】：

您可以使用Array.prototype.reverse() 切换display 的div 元素

.step1Content {
  display: block;
}
.step2Content {
  display: none;
}

<button onclick='step2()'>2. Taskeros and Prices</button>
<div class='step1Content'>Content1</div>
<div class='step2Content'>AnotherContent</div>
<script>
  var divs = Array.from(document.querySelectorAll("div[class^=step]"));
  function step2() {
    divs[0].style.display = "none";
    divs[1].style.display = "block";
    divs.reverse();
  }
</script>

【讨论】：