如何在JavaScript中正确显示div？#toursdiv2异常修复求助

问题背景 #

默认状态下#albums可见，打开其他任意div时#albums隐藏，仅当前打开的div可见；关闭该div后，#albums重新显示。目前除#toursdiv2外，其余div均符合该逻辑，但#toursdiv2触发方式特殊，无法适配现有逻辑。

现有代码 #

JavaScript代码

function showabout(){ var awards=document.getElementById("awardsdiv"); var tours=document.getElementById("toursdiv"); var about=document.getElementsByClassName("about")[0]; var albums=document.getElementById("albums"); about.style.display=(about.style.display==="block"?"none":"block"); if(about.style.display==="block"){ albums.style.display="none"; tours.style.display="none"; awards.style.display="none"; } else{ albums.style.display="block"; albums.style.WebkitAnimationName="slideIn"; //not important } // albums.style.display=(albums.style.display==="none"?"block":"none"); } function showtours(){ var awards=document.getElementById("awardsdiv"); var about=document.getElementsByClassName("about")[0]; about.style.display="none"; var albums=document.getElementById("albums"); var tours=document.getElementById("toursdiv"); tours.style.display=(tours.style.display==="block"?"none":"block"); if(tours.style.display==="block" ){ albums.style.display="none"; awards.style.display="none"; about.style.display="none"; } else{ albums.style.display="block"; albums.style.WebkitAnimationName="slideIn"; //not important } } function showtours2(){ var awards=document.getElementById("awardsdiv"); var about=document.getElementsByClassName("about")[0]; var tours1=document.getElementById("toursdiv"); var tours2=document.getElementById("toursdiv2"); tours1.style.display="none"; tours2.style.display="block"; if(tours2.style.display==="block"){ about.style.display="none"; awards.style.display="none"; } else{ albums.style.display="block"; albums.style.WebkitAnimationName="slideIn"; //not important tours2.style.display="none"; } } function showtours1(){ var awards=document.getElementById("awardsdiv"); var about=document.getElementsByClassName("about")[0]; var tours1=document.getElementById("toursdiv"); var tours2=document.getElementById("toursdiv2"); tours2.style.display="none"; tours1.style.display="block"; // if(tours2.style.display==="block"){ // about.style.display="none"; // awards.style.display="none"; // } // else{ // albums.style.display="block"; // albums.style.WebkitAnimationName="slideIn"; // tours2.style.display=none; // } } function showawards(){ var awards=document.getElementById("awardsdiv"); var about=document.getElementsByClassName("about")[0]; about.style.display="none"; var albums=document.getElementById("albums"); var tours=document.getElementById("toursdiv"); awards.style.display=(awards.style.display==="block"?"none":"block"); if(awards.style.display==="block" ){ albums.style.display="none"; tours.style.display="none"; about.style.display="none"; } else{ albums.style.display="block"; albums.style.WebkitAnimationName="slideIn"; //not important } }

CSS代码

#menu{ font-family: 'Source Code Pro', monospace; font-weight:bold; width:90%; height:10%; position:absolute; left:5%; } #menu a{ color:#bba2a2; text-decoration:none; } #about,#tours,#channel,#website,#awards,#shop{ height:80%; width:8%; font-size:20px; } #about{ position:absolute; top:5%; left:5%; } #tours{ position:absolute; top:5%; left:20%; } #channel{ position:absolute; top:5%; left:65%; } #website{ position:absolute; top:5%; left:50%; } #awards{ position:absolute; top:5%; left:35%; } #shop{ position:absolute; top:5%; left:80%; } #about span:hover,#tours span:hover,#channel span:hover,#website:hover,#awards span:hover,#shop:hover{ cursor:pointer; border-radius:15px; color:red; transition:1s; } #website a:hover,#channel a:hover ,#shop a:hover{ transition:1s; cursor:pointer; color:red; transition:1s; } .about{ display:none; } #toursdiv,#toursdiv2{ display:none; } #awardsdiv{ display:none; } #toursnext{ font-size:40px; position:absolute; top:25%; left:30%; cursor:pointer; } #toursprevious{ font-size:40px; position:absolute; top:25%; left:30%; cursor:pointer; }

HTML代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <div id="menu"> <div id="about"> <span class="menus

修复方案 #

没问题！完全可以在不删除任何现有代码的前提下修复这个问题。核心问题是showtours2和showtours1函数没有处理#albums的显示状态，同时showtours函数也没考虑到toursdiv2的存在，咱们只需要补充几行代码即可：

1. 更新showtours2函数
   在函数中添加对#albums的获取和隐藏逻辑，确保打开toursdiv2时#albums被隐藏：

   function showtours2(){
       var awards=document.getElementById("awardsdiv");
       var about=document.getElementsByClassName("about")[0];
       var tours1=document.getElementById("toursdiv");
       var tours2=document.getElementById("toursdiv2");
       var albums=document.getElementById("albums"); // 新增：获取albums元素
       tours1.style.display="none";
       tours2.style.display="block";
       if(tours2.style.display==="block"){
           about.style.display="none";
           awards.style.display="none";
           albums.style.display="none"; // 新增：隐藏albums
       } else{
           albums.style.display="block";
           albums.style.WebkitAnimationName="slideIn";
           tours2.style.display="none";
       }
   }
   

2. 更新showtours1函数
   当从toursdiv2切换回toursdiv时，要确保#albums依然保持隐藏状态，同时隐藏其他无关内容：

   function showtours1(){
       var awards=document.getElementById("awardsdiv");
       var about=document.getElementsByClassName("about")[0];
       var tours1=document.getElementById("toursdiv");
       var tours2=document.getElementById("toursdiv2");
       var albums=document.getElementById("albums"); // 新增：获取albums元素
       tours2.style.display="none";
       tours1.style.display="block";
       // 新增：隐藏albums和其他无关内容
       albums.style.display="none";
       about.style.display="none";
       awards.style.display="none";
       // 原有注释代码可保留，无需删除
       // if(tours2.style.display==="block"){
       // about.style.display="none";
       // awards.style.display="none";
       // }
       // else{
       // albums.style.display="block";
       // albums.style.WebkitAnimationName="slideIn";
       // tours2.style.display=none;
       // }
   }
   

3. 补充showtours函数的兼容性处理
   当通过showtours开关toursdiv时，需要先隐藏toursdiv2，避免两个tour区域同时显示，同时保证逻辑一致性：

   function showtours(){
       var tours2=document.getElementById("toursdiv2"); // 新增：获取toursdiv2元素
       tours2.style.display="none"; // 新增：切换toursdiv时隐藏toursdiv2
       var awards=document.getElementById("awardsdiv");
       var about=document.getElementsByClassName("about")[0];
       about.style.display="none";
       var albums=document.getElementById("albums");
       var tours=document.getElementById("toursdiv");
       tours.style.display=(tours.style.display==="block"?"none":"block");
       if(tours.style.display==="block" ){
           albums.style.display="none";
           awards.style.display="none";
           about.style.display="none";
       } else{
           albums.style.display="block";
           albums.style.WebkitAnimationName="slideIn";
       }
   }
   

修复后效果 #

• 打开toursdiv2时，#albums会自动隐藏，其他无关区域也会被隐藏
• 从toursdiv2切换回toursdiv时，#albums保持隐藏状态
• 关闭toursdiv时，#albums重新显示
• 打开其他区域（如about、awards）时，toursdiv2会被自动隐藏，符合整体逻辑

内容的提问来源于stack exchange，提问作者K. P.