javascript toggle顯示和隱藏多個div元素

Question

我在頁面上有兩個div（id的MAY和JUNE）和頁面上的兩個按鈕。該頁面通過顯示五月div開始，與六月div隱藏使用css顯示：無

我想創建正確的JavaScript將切換他們兩個之間，但（在這裏搜索後）我可以只設法讓一個人工作。

Codepen出的問題是https://codepen.io/billteale/pen/zwBBez

<a href="#" id="button" >MAY</a> 
<a href="#" id="button" >JUNE</a> 
<!-- first div, shows on page load --> 
<div id="MAY"> 
     <div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>May 2017</strong></h1> 
    </div> 
<!-- second div, hidden originally --> 
    <div class="hidden" id="JUNE"> 
     <div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>June 2017</strong></h1> 
     </div> 

...和當前的JS是

var button = document.getElementById('button'); // Assumes element with id='button' 
button.onclick = function() { 
    var div = document.getElementById('MAY'); 
    if (div.style.display !== 'none') { 
    div.style.display = 'none'; 
    } 
    else { 
    div.style.display = 'block'; 
    } 
}; 

最終我將有四個或更多的div之間切換，與每個按鈕顯示其相關的div ，並隱藏其他人。

有人可以告訴我如何添加到我在這裏使代碼爲多元素的代碼？

Answer 1

它可以通過設置在錨標記的href屬性div的ID，並呈現同時隱藏其他相應的div來完成。它可以爲任何數量的div的沒有額外的腳本，只需將新的div id添加到新的錨定標記href。你應該給所有div的普通班級month全選。

$("a.btn").click(function() { 
 
    var id = $(this).attr("href"); 
 
    $("div.month:visible").hide(); 
 
    $(id).show(); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#MAY" class="btn" id="button-may">MAY</a> 
 
<a href="#JUNE" class="btn" id="button-june">JUNE</a> 
 
<!-- first div, shows on page load --> 
 
<div id="MAY" class="month"> 
 
    <div style="background-color: lightgrey"> 
 
    <h1 style="padding: 5px"><strong>May 2017</strong></h1> 
 
    </div> 
 
</div> 
 
<!-- second div, hidden originally --> 
 
<div class="month hidden" id="JUNE"> 
 
    <div style="background-color: lightgrey"> 
 
    <h1 style="padding: 5px"><strong>June 2017</strong></h1> 
 
    </div> 
 
</div>

Answer 2

div.style.visibility = "hidden" 

這將完全隱藏你的div。我敢肯定，這是你所要求的

，而不是說你也可以做一個獨立的功能，並添加點鐘div的

<div onclick="nameoffunction()"></div> 

功能可以在一個參數，每個格點擊功能可以有其編號的參數

Answer 3

你的div搞砸了！這段代碼現在正在jQuery的幫助下工作。

$("#JUNE").hide(); 
 
$("#MAY").show(); 
 

 
$('#button-may').on("click", function() { 
 
    $("#JUNE").hide(); 
 
    $("#MAY").show(); 
 
}); 
 

 
$('#button-june').on("click", function() { 
 
    $("#JUNE").show(); 
 
    $("#MAY").hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="button-may">MAY</a> 
 
<a href="#" id="button-june">JUNE</a> 
 
<!-- first div, shows on page load --> 
 
<div id="MAY"> 
 
    <div style="background-color: lightgrey"> 
 
    <h1 style="padding: 5px"><strong>May 2017</strong></h1> 
 
    </div> 
 
</div> 
 
<!-- second div, hidden originally --> 
 
<div class="hidden" id="JUNE"> 
 
    <div style="background-color: lightgrey"> 
 
    <h1 style="padding: 5px"><strong>June 2017</strong></h1> 
 
    </div> 
 
</div>

Answer 4

首先，添加一個「DIV-切換」類要切換的div中的每一個。之後，你綁定按鈕上的點擊事件，發射一個以標識符爲參數的函數。

該函數將貫穿您的div並設置參數ID爲可見的，並隱藏其他參數。

這樣你就可以添加更多的div來切換。你只需要用「div-toggle」類標記它們，設置它們的ID並創建它們各自的按鈕。

var divs = document.getElementsByClassName('div-toggle'); 
 

 
function toggle(id) { 
 
    for (var i = 0; i < divs.length; i++) { 
 
     var div = divs[i]; 
 
     if (div.id == id) 
 
     div.style.display = 'block'; 
 
     else 
 
     div.style.display = 'none'; 
 
    } 
 
}

<a href="#" onclick="toggle('MAY')" >MAY</a> 
 
<a href="#" onclick="toggle('JUNE')" >JUNE</a> 
 
<!-- first div, shows on page load --> 
 
<div class="div-toggle" style="display:block;" id="MAY"> 
 
    <div style="background-color: lightgrey"> 
 
     <h1 style="padding: 5px"><strong>May 2017</strong></h1> 
 
    </div> 
 
</div> 
 
<!-- second div, hidden originally --> 
 
<div class="div-toggle" style="display:none;" id="JUNE"> 
 
    <div style="background-color: lightgrey"> 
 
     <h1 style="padding: 5px"><strong>June 2017</strong></h1> 
 
    </div> 
 
</div>