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>