帶按鈕的TOGGLE 2 DIVS（使用Javascript，HTML和CSS）

Question

基本上，我有2個div，里面都有不同的內容，我想用一個按鈕在它們之間切換。

我在這里有2個div，分別具有“ step1Content”和“ step2Content”類。

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

我給step1Content樣式顯示：塊。

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

您會認為結果還可以吧？ 不，當我單擊按鈕時，它實際上什么也沒做。 我不知道為什么，對此有幫助嗎？

Answer 1

該函數是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>

Answer 2

請記住

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>

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

Answer 4

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

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

帶按鈕的TOGGLE 2 DIVS（使用Javascript，HTML和CSS）

問題描述

4 個解決方案

解決方案1
1 2017-02-03 04:21:17

解決方案2
1 2017-02-03 04:24:37

解決方案3
1 2017-02-03 04:41:50

解決方案4
0 2017-02-03 04:23:55

帶按鈕的TOGGLE 2 DIVS（使用Javascript，HTML和CSS）

問題描述

4 個解決方案

解決方案1 1 2017-02-03 04:21:17

解決方案2 1 2017-02-03 04:24:37

解決方案3 1 2017-02-03 04:41:50

解決方案4 0 2017-02-03 04:23:55

解決方案1
1 2017-02-03 04:21:17

解決方案2
1 2017-02-03 04:24:37

解決方案3
1 2017-02-03 04:41:50

解決方案4
0 2017-02-03 04:23:55