How to make div properly appear onClick?

Question

I'm making a site with simple JavaScript. It's supposed to show a different object when a different link is clicked. It does this but it shows the other objects which are supposed to remain hidden in the menu area, and you have to click the links a whole bunch to make it go away, and only then will the page work properly.

Here's the code.

<!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

You can change these css rules

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

[edit]
Instead of empty current_obj, that you hide initially, you should use object that is actually current , when the page is loaded, and this obj is 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>

You have to either place this script at the end of the body tag or use window.onload

How to make div properly appear onClick?

Question

1 answers

solution1
0 2013-02-11 22:44:10

How to make div properly appear onClick?

Question

1 answers

solution1 0 2013-02-11 22:44:10

solution1
0 2013-02-11 22:44:10