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

您的代码中存在多个语法错误，HTML的结构将使第一次点击后切换显示的链接消失。

您不会修改document.getElementById的值来显示或隐藏DOM中的内容。 getElementById是一个内置函数，用于扫描文档并返回你对你指定的id对象有所了解。如果将其设置为相等（=），则会消除其内置功能。</ p>

您需要访问DOM元素的style对象的display属性和window.getComputedStyle()值才能获取和设置CSS样式。

此外，不使用内联HTML事件处理属性（onclick等），因为它们会创建“意大利面条代码”，创建修改{{1}的匿名全局函数}绑定，不要遵循 W3C DOM Event Standard

通过评论查看正确的解决方案和解释：

this

// 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;}

Answer 2

如果在两个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>

javascript onclick切换样式显示

2 个答案: