如何使div正确出现在onClick上？

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，应该在加载页面时使用实际上是current的对象，并且该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正确出现在onClick上？

问题描述

1 个解决方案

解决方案1
0 2013-02-11 22:44:10

如何使div正确出现在onClick上？

问题描述

1 个解决方案

解决方案1 0 2013-02-11 22:44:10

解决方案1
0 2013-02-11 22:44:10