javascript - 我需要在网页中单击 <a> 标记时调用 Javascript 函数来显示和隐藏 <div> 内容

Question

我已在页面的正文部分附加了 java 脚本文件，但它仍然无法正常工作。

Here is #javascript function that i want to call

function opentab(evt, tab) {
var i, content, links;
    content = document.getElementsByClassName("main");
    for(i = 0;i < content.length;i++){
        content[i].display="none";
    }
    links=document.getElementsByClassName("linked");
    for(i=0; i < links.length;i++){
        links[i].className=links[i].className.replace("active", "");
   
    }
    
    window.document.getElementById(tab).style.display = "block";
  evt.currentTarget.className += " active";
}

This is the #HTML code i want to call the above method onclick of <a> tag to show the specific div. 

    <div class="sidebar">
        <img src="PNG%20WE%20Carry%20Fast-01.png" alt="Logo">
                          
        <a href="#" onclick='opentab(event, 'home')'  class="linked"  ><i class="fas fa-home" ></i>
          Home                </a>
      <a href="#" onclick='opentab(event, 'routes')'    class="linked" >
          <i class="fas  fa-route"></i> Routes</a>
      <a href="#" onclick='opentab(event, 'vehicles')'    class="linked" ><i class="fas fa-truck-moving"></i>
          Vehicles</a>
      <a href="#" onclick='opentab(event, 'QRcode')'    class="linked" ><i class="fas fa-qrcode"></i> Qr Code</a>
        
      <a href="#" onclick='opentab(event, 'OrderStatus')'     class="linked" ><i class="fas fa-box"></i> Order Status</a>
      <a href="#" onclick='opentab(event, 'Report')'   class="linked" ><i class="fas fa-chart-bar"></i>
          Report</a>         
        </div>
   
      <div id="home" class="main">
        <h1>Hi welcome to your home page
        </h1>
        </div>
        

Answer 1

onclick='opentab(event, 'OrderStatus')' 由于嵌套引号不正确而不会执行。

尝试 onclick="opentab(event, 'OrderStatus')"

这样内部引号 '' 就不会与外部双引号 "" 冲突

此外，没有与分区关联的显示属性。您想要实现的是设置 style 属性。

content[i].style.display = "none";