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

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

我想創建正確的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 ，並隱藏其他人。

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

來源

2017-04-22 Bill Teale

你可以使用jQuery。有一個jQuery標籤。 –

我在最後一頁使用bootstrap，所以可以使用jquery，但是我缺乏知識令我非常沮喪。 –

它可以通過設置在錨標記的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>

來源

2017-04-22 01:50:15

謝謝丹，這對我工作。當談到JavaScript時，我是一個全新的新手，我非常感謝所有通過的答案。我相信他們都工作得很好，這是我用我有限的知識在我的網頁上工作的人，所以我將其標記爲正確的答案。 –

@BillTeale樂於助人！ –

div.style.visibility = "hidden"

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

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

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

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

來源

2017-04-22 01:35:21

嗨CJ。由於我對JavaScript的知識不足，我非常困惑。我不確定你的第二部分，它在我的頭上。我希望能夠使用「MAY」ID隱藏div，並在單擊6月鏈接時顯示帶有「JUNE」ID的div，反之亦然。目前，我已經磨合我的方式獲得五月鏈接顯示和隱藏，但它不會影響其他分區 –

你的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>

來源

2017-04-22 01:39:30 Felix

首先，添加一個「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>

來源

2017-04-22 02:00:33

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

回答

相關問題