0

我正在用简单的 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>
4

1 回答 1

0

您可以更改这些 CSS 规则

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

[编辑]当页面加载时，您应该使用实际
是 current_obj 的对象， 而不是最初隐藏的空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>

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

于 2013-02-11T22:44:10.327 回答