在我们进入之前： CSS并不重要，这是一个纯粹的JavaScript问题
所以，简而言之：我已经尝试在代码中明确说明，我已经写了它应该如何工作，但是短版本是#album是可见的默认情况下，如果您打开任何其他div，它就会消失。基本上只有当前打开的div可见，如果关闭，#albums再次出现，并且它正常工作，则期待#toursdiv2，与其他工作方式不同的是，它没有以相同的方式触发，这就是为什么我无法找到一种方法让它像其他方式一样工作。
我可以在不删除代码的任何部分的情况下修复此问题吗？
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
}
}#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;
}<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" onclick="showabout()">About</span>
</div>
<div id="tours">
<span class="menus" onclick="showtours()">Tours</span>
</div>
<div id="awards">
<span class="menus" onclick="showawards()">Awards</span>
</div>
</div>
<br><br><br><br>
<div id="albums">
This is <strong>ALBUMS</strong> div, this is visible by default, if any other div is visible, it disappears
</div>
<br><br>
<div class="about">
This is <strong>ABOUT</strong> div, becomes visible on click,if this is visible everything else isn't, and disappears if any other div becomes visible/by clicking on it again and then album div is visible
</div>
<br><br>
<div id="toursdiv">
This is the <strong>part 1 of TOURS</strong> div,becomes visible on click,if this is visible everything else isn't, and disappears if any other div becomes visible/by clicking on it again and then album div is visible
<i title="Click to show part 2" class="fa fa-arrow-right" id="toursnext" onclick="showtours2()"></i>
</div>
<br><br>
<div id="toursdiv2">
This is the <strong>part 2 of TOURS</strong> div, which I can't make to be working the same as the rest of the divs. If this is visible, and you open any other div, you'll see the problem, that I couldn't make it work like the rest of the div when opening new div
<i title="Click to show part 1" class="fa fa-arrow-left" id="toursprevious" onclick="showtours1()"></i>
</div>
<br><br>
<div id="awardsdiv">
This is <strong>AWARDS</strong> div,becomes visible on click,if this is visible everything else isn't, and disappears if any other div becomes visible/by clicking on it again and then album div is visible
</div>
答案 0 :(得分：1)
我认为这是因为你每次选择其他div时都不会改变toursdiv2再次显示none。我在这里更新你的代码^^
function showabout(){
var awards=document.getElementById("awardsdiv");
var tours=document.getElementById("toursdiv");
var tours2=document.getElementById("toursdiv2");
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";
tours2.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");
var tours2=document.getElementById("toursdiv2");
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";
tours2.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");
var tours2=document.getElementById("toursdiv2");
awards.style.display=(awards.style.display==="block"?"none":"block");
if(awards.style.display==="block" ){
albums.style.display="none";
tours.style.display="none";
tours2.style.display="none";
about.style.display="none";
}
else{
albums.style.display="block";
albums.style.WebkitAnimationName="slideIn"; //not important
}
}#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;
}<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" onclick="showabout()">About</span>
</div>
<div id="tours">
<span class="menus" onclick="showtours()">Tours</span>
</div>
<div id="awards">
<span class="menus" onclick="showawards()">Awards</span>
</div>
</div>
<br><br><br><br>
<div id="albums">
This is <strong>ALBUMS</strong> div, this is visible by default, if any other div is visible, it disappears
</div>
<br><br>
<div class="about">
This is <strong>ABOUT</strong> div, becomes visible on click,if this is visible everything else isn't, and disappears if any other div becomes visible/by clicking on it again and then album div is visible
</div>
<br><br>
<div id="toursdiv">
This is the <strong>part 1 of TOURS</strong> div,becomes visible on click,if this is visible everything else isn't, and disappears if any other div becomes visible/by clicking on it again and then album div is visible
<i title="Click to show part 2" class="fa fa-arrow-right" id="toursnext" onclick="showtours2()"></i>
</div>
<br><br>
<div id="toursdiv2">
This is the <strong>part 2 of TOURS</strong> div, which I can't make to be working the same as the rest of the divs. If this is visible, and you open any other div, you'll see the problem, that I couldn't make it work like the rest of the div when opening new div
<i title="Click to show part 1" class="fa fa-arrow-left" id="toursprevious" onclick="showtours1()"></i>
</div>
<br><br>
<div id="awardsdiv">
This is <strong>AWARDS</strong> div,becomes visible on click,if this is visible everything else isn't, and disappears if any other div becomes visible/by clicking on it again and then album div is visible
</div>