-2

我有一个学校作业，我正在尝试onclick()显示有关该对象的信息。但它没有弹出。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>IGS-Plattegrond</title>
        <link rel="stylesheet" href="css/MyCSS.css">
        <script src="js/main.js"></script>
    </head>
    <body>
        <section>
            <div class="map">
                <img src="images/plattegrond.jpg" alt="IGS Plattegrond" usemap="#igsmap">
                <map name="igsmap">
<!--        De knoppen op de Plattegrond            -->
                    <area shape="rect" coords="522,263,542,285" alt="stand 1" href="#" onclick='show(1);'>
                    <area shape="rect" coords="458,311,479,334" alt="stand 2" href="#" onclick='show(2);'>
                    <area shape="rect" coords="458,213,477,232" alt="stand 3" href="http://www.google.nl">
                    <area shape="rect" coords="587,315,606,335" alt="stand 4" href="http://www.google.nl">
                    <area shape="rect" coords="586,214,605,231" alt="stand 5" href="http://www.google.nl">
                    <area shape="rect" coords="522,167,542,188" alt="stand 6" href="http://www.google.nl">
                    <area shape="rect" coords="523,125,540,142" alt="stand 7" href="http://www.google.nl">
                    <area shape="rect" coords="237,126,251,141" alt="stand 8" href="http://www.google.nl">
                    <area shape="rect" coords="192,319,207,332" alt="stand 9" href="http://www.google.nl">
                    <area shape="rect" coords="266,303,280,319" alt="stand 10" href="http://www.google.nl">
                    <area shape="rect" coords="228,407,246,424" alt="stand 11" href="http://www.google.nl"> 

                </map>
            </div>
            <div class="info">
                <h2 class="text-center">IGS Interactieve plattegrond</h2>
                <h3 class="text-center">gebruiksaanwijzing</h3>
                <p class="text-center"> Click op een stand nummer m informatie optehalen  </p>
              <a href="#" onclick='show(1);'>Table 1</a>

            <div id="table1"> Content of 1 </div>
            <div id="table2"> Content of 2 </div>
            <div id="table3"> Content of 3 </div>
            <div id="table4"> Content of 4 </div>      


            </div>
        </section>

    </body>

</html>

CSS 

section {
    width:80%;
    height:100%;
    margin:auto;
}
.map {
    width:45%;
    float:left;
    margin-right:5%;
}
.info {
    float:right;
    width:45%;
    margin-left:5%;
}
.text-center {
    text-align:center;
}

#table1, #table2, #table3, #table4, #table5 {
    display: none;
}

javascript

function show(nr) {
    document.getElementById("table1").style.display="none";
    document.getElementById("table2").style.display="none";
    document.getElementById("table3").style.display="none";
    document.getElementById("table4").style.display="none";
    document.getElementById("table5").style.display="none";
    document.getElementById("table"+nr).style.display="block";
}

我遵循了一个教程，它确实对他有用，但我不知道我做错了什么。我希望有人可以帮助我。

真诚的丹尼斯

4

1 回答 1

0

表 5 不存在

function show(nr) {
    document.getElementById("table1").style.display="none";
    document.getElementById("table2").style.display="none";
    document.getElementById("table3").style.display="none";
    document.getElementById("table4").style.display="none";
    //table5 no exist document.getElementById("table5").style.display="none";
    document.getElementById("table"+nr).style.display="block";
}
section {
    width:80%;
    height:100%;
    margin:auto;
}
.map {
    width:45%;
    float:left;
    margin-right:5%;
}
.info {
    float:right;
    width:45%;
    margin-left:5%;
}
.text-center {
    text-align:center;
}

#table1, #table2, #table3, #table4, #table5 {
    display: none;
}
<!DOCTYPE html>
<html>
    <head>
        <title>IGS-Plattegrond</title>
        <link rel="stylesheet" href="css/MyCSS.css">
        <script src="js/main.js"></script>
    </head>
    <body>
        <section>
            <div class="map">
                <img src="images/plattegrond.jpg" alt="IGS Plattegrond" usemap="#igsmap">
                <map name="igsmap">
<!--        De knoppen op de Plattegrond            -->
                    <area shape="rect" coords="522,263,542,285" alt="stand 1" href="#" onclick='show(1);'>
                    <area shape="rect" coords="458,311,479,334" alt="stand 2" href="#" onclick='show(2);'>
                    <area shape="rect" coords="458,213,477,232" alt="stand 3" href="http://www.google.nl">
                    <area shape="rect" coords="587,315,606,335" alt="stand 4" href="http://www.google.nl">
                    <area shape="rect" coords="586,214,605,231" alt="stand 5" href="http://www.google.nl">
                    <area shape="rect" coords="522,167,542,188" alt="stand 6" href="http://www.google.nl">
                    <area shape="rect" coords="523,125,540,142" alt="stand 7" href="http://www.google.nl">
                    <area shape="rect" coords="237,126,251,141" alt="stand 8" href="http://www.google.nl">
                    <area shape="rect" coords="192,319,207,332" alt="stand 9" href="http://www.google.nl">
                    <area shape="rect" coords="266,303,280,319" alt="stand 10" href="http://www.google.nl">
                    <area shape="rect" coords="228,407,246,424" alt="stand 11" href="http://www.google.nl"> 

                </map>
            </div>
            <div class="info">
                <h2 class="text-center">IGS Interactieve plattegrond</h2>
                <h3 class="text-center">gebruiksaanwijzing</h3>
                <p class="text-center"> Click op een stand nummer m informatie optehalen  </p>
              <a href="#" onclick='show(1);'>Table 1</a>

            <div id="table1"> Content of 1 </div>
            <div id="table2"> Content of 2 </div>
            <div id="table3"> Content of 3 </div>
            <div id="table4"> Content of 4 </div>      


            </div>
        </section>

    </body>

</html>

于 2016-12-10T14:13:07.913 回答