0

リンクをクリックすると、div が表示されます。ただし、どのリンクがクリックされているかを知り、どのIDを持っているかを確認して、これを行う必要があります。コンテンツは非表示になっていますが、リンクをクリックしても表示されません。jqueryの使用は許可されていません。解決策はありますか？

Javascript

function show() {
    var a = document.getElementsByTagName("a");
    if (a.id == "link1") {
        document.getElementByID("content1").style.visibility = 'visible';
    } else if (a.id == "link2") {
        document.getElementByID("content2").style.visibility = 'visible';
    } else if (a.id == "link3") {
        document.getElementByID("content3").style.visibility = 'visible';
    } else if (a.id == "link4") {
        document.getElementByID("content4").style.visibility = 'visible';
    }
}

function init() {

    var divs = document.getElementsByTagName("div");
    for (i = 0; i < divs.length; i++) {
        if (divs[i].className == "div") {
            divs[i].style.visibility = 'hidden';
        }
    }
    var a = document.getElementsByTagName("a");
    a.onclick = show;
}

window.onload = init;

HTML

<head>
    <title>Inl1-1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style-1.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="Uppg1.js"></script>
</head>
<body>
    <ul class="meny" id="menu">
        <li><a href="#" id="link1">Utvärdering/Feedback</a>
        </li>
        <li><a href="#" id="link2">Kontakt</a>
        </li>
        <li><a href="#" id="link3">Öppettider</a>
        </li>
        <li><a href="#" id="link4">Om Asperöd</a>
        </li>
    </ul>
    <div class="div" id="content1">
        <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 class="div" id="content2">
        <p><b>Asperå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="Inl1-3.html">fråga</a>
        </p>
    </div>
    <div class="div" id="content3">
        <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 class="div" id="content4">
        <p>Asperöd är en fin park för alla möjliga personer. Vi erbjuder en massa,
            <br/>men det kostar 500kr för att delta för en dag.</p>
        <p>Asperöd är fylld med turister som besöker platsen minst en gång per månad.</p>
        <p>Asperöd är bland de största nöjesparkerna i Scandinavien.</p>
    </div>
</body>
4

4 に答える 4

2 
function show(a) {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
    if (divs[i].className == "div") {
        divs[i].style.visibility = 'hidden';
    }
}
if (a.id == "link1") {
    document.getElementById("content1").style.visibility = 'visible';
}
else if (a.id == "link2") {
    document.getElementById("content2").style.visibility = 'visible';
}
else if (a.id == "link3") {
    document.getElementById("content3").style.visibility = 'visible';
}
else if (a.id == "link4") {
    document.getElementById("content4").style.visibility = 'visible';
}

}

function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
    if (divs[i].className == "div") {
        divs[i].style.visibility = 'hidden';
    }
}
var a = document.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
    a[i].setAttribute("onclick", "show(this);");
}

}

于 2013-02-06T10:24:12.407 に答える
1

マッピングを提供するリンク オブジェクトを作成します。イベントからターゲット要素を取得し、その ID を保存します。次に、id を使用して、リンク オブジェクトから適切な要素の ID を取得します。

function show(event){
var links = {
    link1: "content1",
    link2: "content2",
    link3: "content3",
    link4: "content4"
};

for(var x = 0; x < links.length; x++){
   document.getElementById(links[id]).style.visibility = "hidden";
}

var id = event.target.id;
var a = document.getElementsByTagName("a");
document.getElementById(links[id]).style.visibility = 'visible';
}

init 関数にも問題があります。aは要素の配列であるため、この配列を反復処理し、show 関数をイベントにバインドする必要がありますonclick。

function init() {

    var divs = document.getElementsByTagName("div");
    for (i = 0; i < divs.length; i++) {
        if (divs[i].className == "div") {
            divs[i].style.visibility = 'hidden';
        }
    }
    var a = document.getElementsByTagName("a");
    for(var x = 0; x < a.length; x++){
       a[x].onclick = show;
    }
}

作業例: http://jsfiddle.net/538s2/

于 2013-02-06T10:00:37.863 に答える
1

div.style.display = 'block'; を使用します。div.style.display = 'なし';

于 2013-02-06T10:01:17.677 に答える
0

別の方法で行う必要があります。私はいくつかの変更を加えました。これをコピーして試すことができます

        <head>
<title>Inl1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style-1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="Uppg1.js"></script>

<script type="text/javascript">
function show(id){


if(id == 'link1'){
document.getElementById("content1").style.visibility = 'visible';
}
else if(id == 'link2'){
document.getElementById("content2").style.visibility = 'visible';
}
else if(id == 'link3'){
document.getElementById("content3").style.visibility = 'visible';
}
else if(id == 'link4'){
document.getElementById("content4").style.visibility = 'visible';
}
}

function init(){

var divs = document.getElementsByTagName("div");
for(i=0; i<divs.length; i++){
  if(divs[i].className == "div"){
    divs[i].style.visibility = 'hidden';
  }
}
var a = document.getElementsByTagName("a");
a.onclick = show;
}

window.onload = init;
</script>
</head>

<body>

<ul class="meny" id="menu">
<li><a href="javascript:show('link1')" id="link1" >Utvärdering/Feedback</a></li>
<li><a href="javascript:show('link2')" id="link2">Kontakt</a></li>
<li><a href="javascript:show('link3')" id="link3">Öppettider</a></li>
<li><a href="javascript:show('link4')" id="link4">Om Asperöd</a></li>
</ul>

<div class="div" id="content1">
<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 class="div" id="content2">
<p><b>Asperå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="Inl1-3.html">fråga</a></p>
</div>

<div class="div" id="content3">
<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 class="div" id="content4">
<p>Asperöd är en fin park för alla möjliga personer. Vi erbjuder en massa, 
<br> men det kostar 500kr för att delta för en dag.
</p>
<p> Asperöd är fylld med turister som besöker platsen minst en gång per månad. </p>
<p> Asperöd är bland de största nöjesparkerna i Scandinavien. </p>
</div>

</body>
于 2013-02-06T10:11:49.280 に答える