Question

我正在制作一个简单的JavaScript网站。当点击不同的链接时，它应该显示不同的对象。它会这样做，但它会显示其他对象应该保留在菜单区域中，并且您必须单击链接以使其消失，然后页面才能正常工作。

这是代码。

<!DOCTYPE html> <html lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> 
<title>Crap</title>
<body>
<script>
var current_obj='';
function showLinks(objID) {
var obj=document.getElementById(objID); if (current_obj.style) {
current_obj.style.display='none'; }
obj.style.display='block';
current_obj=obj; }
</script>
<style>
.showhide_element {
display: none; }
html {
background-image:url('dash2.jpg');
background-repeat:no-repeat;
background-size:100% 100%;
height: 100%;
 }
#menu {
position:fixed;
width:100%;
bottom:0;
text-align:center;
background:none; 
}
.contentMenu {
display:inline-block;
text-align:center;
padding-top:10px;
padding-bottom:30px;
padding-right:100px;
list-style:none;
text-decoration:none; }
.contentMenu li {
display:inline-block; 
}
.contentMenu li a {
padding:50px; 
}
#contentMenu_info {
padding: 50px 50px;
margin-left:auto;
margin-right:auto;
margin-top:110px;
color:#ffff00;
text-align:center;
display:block;
background-image:url('image.png');
background-size:100% 100%;
width:400px;
height:200px;
}

#contentMenu_media {
padding: 50px 50px;
margin-left:auto;
margin-right:auto;
margin-top:110px;
color:#ffff00;
text-align:center;
display:block;
background-image:url('image2.png');
background-size:100% 100%;
width:500px;
height:300px; 
}
#contentMenu_contact {
padding: 50px 50px;
margin-left:auto;
margin-right:auto;
margin-top:110px;
color:#ffff00;
text-align:center;
display:block;
background-image:url('image3.png');
background-size:100% 100%;
width:500px;
height:300px; 
}
</style>
<div id="menu">
<ul class="contentMenu">

<li><a href="#" class="contentMenu" onClick="showLinks('contentMenu_info');return false;">Info</a></li>
<li><a href="#" class="contentMenu" onClick="showLinks('contentMenu_media');return false;">Media</a></li>
<li><a href="#" class="contentMenu" onClick="showLinks('contentMenu_contact');return false;">Contact</a></li>
</ul>
</div>
<div id="contentMenu_info" class="showhide_element">

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Quisque sit amet est et sapien ullamcorper pharetra.
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

</div>
<div id="contentMenu_media" class="showhide_element">
Media stuff

</div>
<div id="contentMenu_contact" class="showhide_element"> Contact information
</div>
</body>
</html>

Answer 1

您可以更改这些css规则

#contentMenu_contact {
    display: none;
}
#contentMenu_media {
    display: none;
}

<强> [编辑]
您最初隐藏的清空 current_obj，而不是实际上当前的对象，当加载页面时，此obj为 contentMenu_info

<script>
var current_obj = document.getElementById("contentMenu_info");
function showLinks(objID) {
    var obj=document.getElementById(objID); 
    if (current_obj.style) {
        current_obj.style.display='none'; 
    }
    obj.style.display='block';
    current_obj=obj; 
}
</script>

您必须将此脚本放在body标记的末尾或使用window.onload

如何使div正确显示在点击？

1 个答案: