javascript onclick切換樣式顯示

Question

我想在我的網頁上使用javascript和html鏈接的兩個元素的'none'和'block'之間有'切換顯示'。當頁面上應該有兩個DIV時，其中一個是display：block，另一個是display：none，並帶有一個鏈接來切換每個div。

我的html：

<div class="uvp_bar_display" id="uvp_bar"> 
<a class="" href="#document_body" id="uvp_bar_link" onclick="uvp_toggle_display(['uvp_bar_display', 'uvp_display'])"><img alt="" height="40" id="uvp_bar_image" src="/asset/image/sea_foam_minimized.gif" width="960px" /></a> 
</div> 

<div class="uvp_display" id="uvp"> 
<img alt="sea foam" height="400" id="uvp_image" onclick="uvp_toggle_display(['uvp_bar_display', 'uvp_display'])" src="/asset/image/image.jpg" width="960" /> 
</div> 

我的javascript：

function uvp_toggle_display($ids) { 
    $id = Araray.isArray($ids) ? $ids : [$ids]; 
    $id.forEach(function $i) { 
     document.getElementById = 
     (document.getElementById($i).style.display == 'none') ? 'block' : 'none'; 
    } 
} 

我不是找一個jQuery解決方案，

感謝

Answer 1

如果兩者之間簡單的切換div，使用這個：

<div> 
    <div id="div1" style="display:block;"> 
     <h1>Displaying Div 1</h1> 
    </div> 
    <div id="div2" style="display:none;"> 
     <h1>Displaying Div 2</h1> 
    </div> 
    <button type="submit" id="btnToogle">Toogle</button> 
</div> 

<script> 
var button = document.getElementById('btnToogle'); 
button.onclick = function() { 
    var div1 = document.getElementById('div1'); 
    var 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'; 
    } 
}; 
</script> 

Answer 2

您的代碼中有幾處語法錯誤，並且HTML的結構會使第一次單擊後切換顯示的鏈接消失。

您不要修改的document.getElementById值顯示或隱藏在DOM東西。getElementById是一個內置函數，用於掃描文檔並返回給您指定的對象id。如果您將其設置爲等於（=），則會清除其內置功能。

您需要訪問DOM元素的style對象的display屬性和window.getComputedStyle()值來獲取和設置CSS樣式。

此外，不使用內嵌HTML事件處理屬性（onclick等），爲他們創造「麪條代碼」，創建修改this綁定和不遵循W3C DOM Event Standard匿名全局函數

通過的意見正確的解決方案，並解釋請參見本：

// First, wait until the DOM is loaded and then begin: 
 
window.addEventListener("DOMContentLoaded", function(){ 
 
    
 
    // Get a reference to the link: 
 
    var link = document.getElementById("uvp_bar_link"); 
 
    
 
    // Get references to the divs that need to be shown/hidden 
 
    var divs = document.querySelectorAll("#uvp_bar, #uvp"); 
 
    
 
    // Set up a click event handler for the link: 
 
    link.addEventListener("click", uvp_toggle_display); 
 
    
 
    
 
    // This is the function that will run when the link has been clicked 
 
    function uvp_toggle_display(evt){ 
 
    // First, prevent the native behavior of the link: 
 
    evt.preventDefault(); 
 
    
 
    // And, cancel the event from bubbling to other elements 
 
    evt.stopPropagation(); 
 
    
 
    // Now, toggle the divs by looping through the group 
 
    divs.forEach(function(div){ 
 

 
     // And change the display based on what it is now. 
 
     // NOTE: inline styles are gotten and set via: element.style 
 
     //  but styles set anywhere else are gotten from window.getComputedStyle(element) 
 
     div.style.display = (window.getComputedStyle(div).display === "none") ? "block" : "none"; 
 
    }); 
 
     
 
    } 
 
    
 
});

/* Don't set style information in HTML attributes, that's what CSS is for 
 
    See how much cleaner your HTML is now?         */ 
 
#uvp_bar_image {width:960px; height:40px; } 
 
#uvp_image { width:960px; height:400px;} 
 

 
/* Start the page off with one div not shown: */ 
 
#uvp { display:none;}

<!-- Your HTML was not correct for a few reasons: 
 
    1. You had inline event handlers (onclick) 
 
    2. You had attributes with no values (alt="", class="") 
 
    3. You were setting style information (height and width) using HTML attributes 
 
     3a. That should be done with CSS 
 
     3b. Even if you were going to do it in HTML, you included "px" in the values which is wrong 
 
    4. You can't have the link that toggles the visibility of the divs in one of the divs that 
 
     will wind up being hidden because you'll hide the link that brings it back. 
 
--> 
 

 
<div> 
 
    <a href="#document_body" id="uvp_bar_link">Toggle divs</a> 
 
</div> 
 

 
<div class="uvp_bar_display" id="uvp_bar"> 
 
    <img id="uvp_bar_image" src="/asset/image/sea_foam_minimized.gif" alt="image 1"> 
 
</div> 
 

 
<div class="uvp_display" id="uvp"> 
 
    <img alt="sea foam" id="uvp_image" src="/asset/image/image.jpg"> 
 
</div>