0

HTMLに4つの異なるdivがあり、非表示にしてから、クリックしたリンクに応じて選択したdivを表示します。しかし、私はそれらを隠すことはできません。それは機能しません、そして私はそれぞれのdivにあるものはすべて、現在のようにそれらの隣ではなく、リンクの下に表示されることを望みます。私の最大の難しさは、私のdivを隠すことです、何か解決策はありますか？

Javascript

function show1(){
var minaP = document.getElementByID("one");
minaP.style.visibility = "visible";
}

function show2(){
var minaP = document.getElementById("two");
minaP.style.visibility = "visible";
}

function show3(){
var minaP = document.getElementById("three");
minaP.style.visibility = "visible";
}

function show4(){
var minaP = document.getElementById("four");
minaP.style.visibility = "visible";
}

function init() {

var minaDiv = document.getElementsByTagName("div");
for(i=0; i<minaDiv.length; i++){
  minaDiv[i].style.visibility = "hidden";
}

var minaA = document.getElementsByTagName("a");
for(i=0; i<minaA.length; i++){
  if(document.getElementById == "1"){
    minaA.onclick = show1;
  }
}

}

window.onload = init;

HTML

<div>
<ul class="meny">
<li><a href="#" id="1">Utvärdering/Feedback</a></li>
<li><a href="#" id="2">Kontakt</a></li>
<li><a href="#" id="3">Öppettider</a></li>
<li><a href="#" id="4">Om Asperöd</a></li>
</ul>
</div>

<div id="one">
<p><b>Aperåd Äventyrsland</b></p> 
<p>Växel: 0200-123456999 (kl.08:30-15)</p>
<p>Stora Vägen 140</p>
<p>289 22 Aperöd</p>
<p>Skicka oss din <a href="#">fråga</a></p>
</div>
<div id="two">
<p>Du kan kontakta oss på följande nummer: 
<br> 040-123456
</p>
<p> Du kan även mejla oss:
<br> aperöd@hotmail.com
</p>
</div>
<div id="three">
<p>Vi har följande öppettider:</p>
<p> Mån-Fre: 10:00 - 20:00 </p>
<p> Lör: 10:00 - 18:00 </p>
</div>
<div id="four">

Aperödärenfinparkförallamöjligapersoner。Vi erbjuder en massa、mendetkostar500krförattdeltaförendag
。

4

2 に答える 2

1

たぶん、jQueryの使用/学習を検討する必要があります。それはコードサイズを減らすのに役立ち、たくさんの派手なアニメーションがあります;）

ここでの高速デモ.hide() .show()

http://jsfiddle.net/yFhX5/

于 2013-02-05T23:50:08.827 に答える
1

それらを表示するにはand orstyle.display = 'none'ではなくを使用する必要がありますstyle.visibilitystyle.display = 'block''inline'

于 2013-02-05T23:25:02.637 に答える