如何在JavaScript中正确显示div

在这个问题上，CSS并不重要，它是一个纯JavaScript问题

我试着在代码本身中说明，我已经写了它应该如何工作，但简短的版本是，默认情况下，

#album

是可见的，如果打开任何其他

div

，它就会消失。基本上只有当前打开的

div

可以看到，如果它关闭，

#albums

再次出现，并且它工作正常，除了

#toursdiv2

，它的工作方式与其他的不同，它不会以相同的方式触发，这就是为什么我无法找到一种方法使它像其他的一样工作

我可以在不删除代码任何部分的情况下修复此问题吗

函数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==“块”？“无”：“块”）；
if（关于.style.display==“块”）{
albums.style.display=“无”；
tours.style.display=“无”；
awards.style.display=“无”；
}
否则{
albums.style.display=“block”；
albums.style.WebkitAnimationName=“slideIn”//不重要
}
//albums.style.display=（albums.style.display==“无”？“块”：“无”）；
}
函数showtours（）{
var awards=document.getElementById（“awardsdiv”）；
var about=document.getElementsByClassName（“about”）[0]；
about.style.display=“无”；
var albums=document.getElementById（“albums”）；
var tours=document.getElementById（“toursdiv”）；
tours.style.display=（tours.style.display==“块”？“无”：“块”）；
if（tours.style.display==“block”）{
albums.style.display=“无”；
awards.style.display=“无”；
about.style.display=“无”；
}
否则{
albums.style.display=“block”；
albums.style.WebkitAnimationName=“slideIn”//不重要
}
}
函数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=“无”；
tours2.style.display=“block”；
if（tours2.style.display==“block”）{
about.style.display=“无”；
awards.style.display=“无”；
}
否则{
albums.style.display=“block”；
albums.style.WebkitAnimationName=“slideIn”//不重要
tours2.style.display=“无”；
}
}
函数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=“无”；
tours1.style.display=“block”；
//if（tours2.style.display==“block”）{
//about.style.display=“无”；
//awards.style.display=“无”；
// }
//否则{
//albums.style.display=“block”；
//albums.style.WebkitAnimationName=“slideIn”；
//tours2.style.display=none；
// }
}
函数showawards（）{
var awards=document.getElementById（“awardsdiv”）；
var about=document.getElementsByClassName（“about”）[0]；
about.style.display=“无”；
var albums=document.getElementById（“albums”）；
var tours=document.getElementById（“toursdiv”）；
awards.style.display=（awards.style.display==“块”？“无”：“块”）；
if（奖励.样式.显示==“块”）{
albums.style.display=“无”；
tours.style.display=“无”；
about.style.display=“无”；
}
否则{
albums.style.display=“block”；
albums.style.WebkitAnimationName=“slideIn”//不重要
}
}

#菜单{
字体系列：“源代码Pro”，monospace；
字体大小：粗体；
宽度：90%；
身高：10%；
位置：绝对位置；
左：5%；
}
#菜单a{
颜色：#bba2a2；
文字装饰：无；
}
#关于，#旅游，#频道，#网站，#奖项，#商店{
身高：80%；
宽度：8%；
字体大小：20px；
}
#关于{
位置：绝对位置；
最高：5%；
左：5%；
}
#游览{
位置：绝对位置；
最高：5%；
左：20%；
}
#渠道{
位置：绝对位置；
最高：5%；
左：65%；
}
#网站{
位置：绝对位置；
最高：5%；
左：50%；
}
#奖励{
位置：绝对位置；
最高：5%；
左：35%；
}
#商店{
位置：绝对位置；
最高：5%；
左：80%；
}
#关于span:hover，#旅游span:hover，#频道span:hover，#网站：hover，#奖项span:hover，#商店：hover{
光标：指针；
边界半径：15px；
颜色：红色；
过渡：1s；
}
#网站a:hover，#频道a:hover，#商店a:hover{
过渡：1s；
光标：指针；
颜色：红色；
过渡：1s；
}
.关于{
显示：无；
}
#toursdiv，#toursdiv2{
显示：无；
}
#获奖者{
显示：无；
}
#图尔斯奈特{
字体大小：40px；
位置：绝对位置；
最高：25%；
左：30%；
光标：指针；
}
#巡回赛{
字体大小：40px；
位置：绝对位置；
最高：25%；
左：30%；
光标：指针；
}

关于
旅行
奖品





这是相册div，默认情况下可见，如果任何其他div可见，它将消失



这是关于div的，单击时可见，如果该div可见，其他所有div都不可见，如果任何其他div可见/再次单击它，然后唱片集div可见，则该div将消失



这是TOURS的第1部分div，单击后可见，如果此div可见，其他所有div都不可见，如果任何其他div可见/再次单击它，然后相册div可见，则此div将消失



这是TOURS的第二部分，我不能让它和其他部分一样工作。如果这是可见的，并且您打开了任何其他div，您将看到问题所在，即在打开新div时，我无法使它像其他div一样工作



这是奖励div，单击时可见，如果该div可见，其他所有div都不可见，如果任何其他div可见/再次单击它，然后唱片集div可见，则该div将消失

我认为这是因为每次选择其他分区时，您都不会将toursdiv2更改为无显示。我在这里更新您的代码^^

函数showabout（）{
var awards=document.getElementById（“awardsdiv”）；