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

于 2013-02-11T22:44:10.327 に答える