使用javascript显示/隐藏<section>元素

时间:2019-12-06 18:04:16

标签: javascript html css hide show

我正在测试一些简单的HTML / JavaScript代码,但是,当我打开网站时,显示/隐藏脚本仅隐藏第一部分,而对其他部分则不起作用。我想要这样,以便对于单击的每个图像,都显示与该图像相对应的部分。

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Profile Bird</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
<script>
function displayBird1() {
    document.getElementById("intro").style.display = "none";
    documemt.getElementById("king").style.display = "block";
    document.getElementById("owl").style.display = "none";
    document.getElementById("eagle").style.display = "none";
    document.getElementById("starling").style.display = "none"; 
}
function displayBird2() {
    document.getElementById("intro").style.display = "none";
    documemt.getElementById("king").style.display = "none";
    document.getElementById("owl").style.display = "block";
    document.getElementById("eagle").style.display = "none";
    document.getElementById("starling").style.display = "none";
}
function displayBird3() {
    document.getElementById("intro").style.display = "none";
    documemt.getElementById("king").style.display = "none";
    document.getElementById("owl").style.display = "none";
    document.getElementById("eagle").style.display = "block";
    document.getElementById("starling").style.display = "none";
}
function displayBird4() {
    document.getElementById("intro").style.display = "none";
    documemt.getElementById("king").style.display = "none";
    document.getElementById("owl").style.display = "none";
    document.getElementById("eagle").style.display = "none";
    document.getElementById("starling").style.display = "block";
}
</script>
</head>

<body>

<header>
<h1>Cool Twitching</h1>
<img class="imageBanner" src="../images/banner.jpg">
<p>Birdwatching is not a hobby it is a lifestyle</p>
</header>

<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="profile.html">In Profile</a></li>
<li><a href="excursions.html">Excursions</a></li>
<li><a href="applications.html">Applications</a></li>
</ul>
</nav>

<main>
<div>
<img class="smallImage" src="../images/bird1.jpg" onclick="displayBird1()" onmouseover="test()">
<img class="smallImage" src="../images/bird2.jpg" onclick="displayBird2()">
<img class="smallImage" src="../images/bird3.jpg" onclick="displayBird3()">
<img class="smallImage" src="../images/bird4.jpg" onclick="displayBird4()">
</div>

<section id="intro" style="display:block" >
<p style="font-size: 16px"> Please click an image to choose what bird information to display </p>
</section>

<section id="king" style="display:none;"> 
<p>To see previous profile birds click the images on the left.</p><br><br>
<h2>Kingfisher</h2>
<img class="smallImageRight" src="../images/bird1.jpg">
<p>Kingfishers or Alcedinidae are a family of small to medium-sized, brightly colored birds in the order Coraciiformes. They have a cosmopolitan distribution, with most species found outside the Americas. The family contains 114 species and is divided into three subfamilies and 19 genera. All kingfishers have large heads, long, sharp, pointed bills, short legs, and stubby tails. Most species have bright plumage with only small differences between the sexes. 
<br><br> Most species are tropical in distribution, and a slight majority are found only in forests. They consume a wide range of prey usually caught by swooping down from a perch. While kingfishers are usually thought to live near rivers and eat fish, many species live away from water and eat small invertebrates. Like other members of their order, they nest in cavities, usually tunnels dug into the natural or artificial banks in the ground. Some kingfishers nest in arboreal termite nests. A few species, principally insular forms, are threatened with extinction. In Britain, the word "kingfisher" normally refers to the common kingfisher.</p>
</section>

<section style="display:none;" id="owl">
<p>To see previous profile birds click the images on the left.</p><br><br>
<h2>Barn Owl</h2>
<img class="smallImageRight" src="../images/bird2.jpg">
<p>The barn owl (Tyto alba) is the most widely distributed species of owl and one of the most widespread of all birds. It is also referred to as the common barn owl, to distinguish it from other species in its family, Tytonidae, which forms one of the two main lineages of living owls, the other being the typical owls (Strigidae). The barn owl is found almost everywhere in the world except polar and desert regions, Asia north of the Himalayas, most of Indonesia, and some Pacific islands.
<br><br>
Phylogenetic evidence shows that there are at least three major lineages of barn owl, one in Europe, western Asia and Africa, one in southeast Asia and Australasia, and one in the Americas, and some highly divergent taxa on islands. Accordingly, some authorities split the group into the western barn owl for the group in Europe, western Asia and Africa, the American barn owl for the group in the Americas, and the eastern barn owl for the group in southeast Asia and Australasia. There is a considerable variation between the sizes and colour of the approximately 28 subspecies but most are between 33 and 39 cm in length with wingspans ranging from 80 to 95 cm. The plumage on head and back is a mottled shade of grey or brown, the underparts vary from white to brown and are sometimes speckled with dark markings. The face is characteristically heart-shaped and is white in most subspecies. This owl does not hoot, but utters an eerie, drawn-out shriek.
</p>
</section>

<section style="display:none;" id="eagle">
<p>To see previous profile birds click the images on the left.</p><br><br>
<h2>Golden Eagle</h2>
<img class="smallImageRight" src="../images/bird3.jpg">
<p>The golden eagle (Aquila chrysaetos) is one of the best-known birds of prey in the Northern Hemisphere. It is the most widely distributed species of eagle. Like all eagles, it belongs to the family Accipitridae. These birds are dark brown, with lighter golden-brown plumage on their napes. Immature eagles of this species typically have white on the tail and often have white markings on the wings. Golden eagles use their agility and speed combined with powerful feet and massive, sharp talons to snatch up a variety of prey, mainly hares, rabbits, marmots and other ground squirrel. 
<br><br>
Golden eagles maintain home ranges or territories that may be as large as 77 sq miles. They build large nests in cliffs and other high places to which they may return for several breeding years. Most breeding activities take place in the spring; they are monogamous and may remain together for several years or possibly for life. Females lay up to four eggs, and then incubate them for six weeks. Typically, one or two young survive to fledge in about three months. These juvenile golden eagles usually attain full independence in the fall, after which they wander widely until establishing a territory for themselves in four to five years.
<br><br>
</p>
</section>

<section style="display:none;" id="starling">
<p>To see previous profile birds click the images on the left.</p><br><br>
<h2>Starling</h2>
<img class="smallImageRight" src="../images/bird3.jpg">
<p>Starlings are small to medium-sized passerine birds in the family Sturnidae. The name "Sturnidae" comes from the Latin word for starling, sturnus. Many Asian species, particularly the larger ones, are called mynas, and many African species are known as glossy starlings because of their iridescent plumage. Starlings are native to Europe, Asia and Africa, as well as northern Australia and the islands of the tropical Pacific. Several European and Asian species have been introduced to these areas as well as North America, Hawaii and New Zealand, where they generally compete for habitats with native birds and are considered to be invasive species. The starling species familiar to most people in Europe and North America is the common starling, and throughout much of Asia and the Pacific, the common myna is indeed common.
<br><br>
Starlings have strong feet, their flight is strong and direct, and they are very gregarious. Their preferred habitat is fairly open country, and they eat insects and fruit. Several species live around human habitation and are effectively omnivores. Many species search for prey such as grubs by "open-bill probing", that is, forcefully opening the bill after inserting it into a crevice, thus expanding the hole and exposing the prey; this behaviour is referred to by the German verb zirkeln.
</p>
</section>

</main>

<footer>
<p>All images copyrighted by Cool Twitchers</p>
</footer>

</body>
</html>

感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

<!DOCTYPE html>
<html>
<head>
<title>Profile Bird</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
<script>
function displayBird1() {
    document.getElementById("intro").style.display = "none";
    document.getElementById("king").style.display = "block";
    document.getElementById("owl").style.display = "none";
    document.getElementById("eagle").style.display = "none";
    document.getElementById("starling").style.display = "none"; 
}
function displayBird2() {
    document.getElementById("intro").style.display = "none";
    document.getElementById("king").style.display = "none";
    document.getElementById("owl").style.display = "block";
    document.getElementById("eagle").style.display = "none";
    document.getElementById("starling").style.display = "none";
}
function displayBird3() {
    document.getElementById("intro").style.display = "none";
    document.getElementById("king").style.display = "none";
    document.getElementById("owl").style.display = "none";
    document.getElementById("eagle").style.display = "block";
    document.getElementById("starling").style.display = "none";
}
function displayBird4() {
    document.getElementById("intro").style.display = "none";
    document.getElementById("king").style.display = "none";
    document.getElementById("owl").style.display = "none";
    document.getElementById("eagle").style.display = "none";
    document.getElementById("starling").style.display = "block";
}
function test() {
}
</script>
</head>

<body>

<header>
<h1>Cool Twitching</h1>
<img class="imageBanner" src="../images/banner.jpg">
<p>Birdwatching is not a hobby it is a lifestyle</p>
</header>

<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="profile.html">In Profile</a></li>
<li><a href="excursions.html">Excursions</a></li>
<li><a href="applications.html">Applications</a></li>
</ul>
</nav>

<main>
<div>
<img class="smallImage" src="../images/bird1.jpg" onclick="displayBird1()" onmouseover="test()">
<img class="smallImage" src="../images/bird2.jpg" onclick="displayBird2()">
<img class="smallImage" src="../images/bird3.jpg" onclick="displayBird3()">
<img class="smallImage" src="../images/bird4.jpg" onclick="displayBird4()">
</div>

<section id="intro" style="display:block" >
<p style="font-size: 16px"> Please click an image to choose what bird information to display </p>
</section>

<section id="king" style="display:none;"> 
<p>To see previous profile birds click the images on the left.</p><br><br>
<h2>Kingfisher</h2>
<img class="smallImageRight" src="../images/bird1.jpg">
<p>Kingfishers or Alcedinidae are a family of small to medium-sized, brightly colored birds in the order Coraciiformes. They have a cosmopolitan distribution, with most species found outside the Americas. The family contains 114 species and is divided into three subfamilies and 19 genera. All kingfishers have large heads, long, sharp, pointed bills, short legs, and stubby tails. Most species have bright plumage with only small differences between the sexes. 
<br><br> Most species are tropical in distribution, and a slight majority are found only in forests. They consume a wide range of prey usually caught by swooping down from a perch. While kingfishers are usually thought to live near rivers and eat fish, many species live away from water and eat small invertebrates. Like other members of their order, they nest in cavities, usually tunnels dug into the natural or artificial banks in the ground. Some kingfishers nest in arboreal termite nests. A few species, principally insular forms, are threatened with extinction. In Britain, the word "kingfisher" normally refers to the common kingfisher.</p>
</section>

<section style="display:none;" id="owl">
<p>To see previous profile birds click the images on the left.</p><br><br>
<h2>Barn Owl</h2>
<img class="smallImageRight" src="../images/bird2.jpg">
<p>The barn owl (Tyto alba) is the most widely distributed species of owl and one of the most widespread of all birds. It is also referred to as the common barn owl, to distinguish it from other species in its family, Tytonidae, which forms one of the two main lineages of living owls, the other being the typical owls (Strigidae). The barn owl is found almost everywhere in the world except polar and desert regions, Asia north of the Himalayas, most of Indonesia, and some Pacific islands.
<br><br>
Phylogenetic evidence shows that there are at least three major lineages of barn owl, one in Europe, western Asia and Africa, one in southeast Asia and Australasia, and one in the Americas, and some highly divergent taxa on islands. Accordingly, some authorities split the group into the western barn owl for the group in Europe, western Asia and Africa, the American barn owl for the group in the Americas, and the eastern barn owl for the group in southeast Asia and Australasia. There is a considerable variation between the sizes and colour of the approximately 28 subspecies but most are between 33 and 39 cm in length with wingspans ranging from 80 to 95 cm. The plumage on head and back is a mottled shade of grey or brown, the underparts vary from white to brown and are sometimes speckled with dark markings. The face is characteristically heart-shaped and is white in most subspecies. This owl does not hoot, but utters an eerie, drawn-out shriek.
</p>
</section>

<section style="display:none;" id="eagle">
<p>To see previous profile birds click the images on the left.</p><br><br>
<h2>Golden Eagle</h2>
<img class="smallImageRight" src="../images/bird3.jpg">
<p>The golden eagle (Aquila chrysaetos) is one of the best-known birds of prey in the Northern Hemisphere. It is the most widely distributed species of eagle. Like all eagles, it belongs to the family Accipitridae. These birds are dark brown, with lighter golden-brown plumage on their napes. Immature eagles of this species typically have white on the tail and often have white markings on the wings. Golden eagles use their agility and speed combined with powerful feet and massive, sharp talons to snatch up a variety of prey, mainly hares, rabbits, marmots and other ground squirrel. 
<br><br>
Golden eagles maintain home ranges or territories that may be as large as 77 sq miles. They build large nests in cliffs and other high places to which they may return for several breeding years. Most breeding activities take place in the spring; they are monogamous and may remain together for several years or possibly for life. Females lay up to four eggs, and then incubate them for six weeks. Typically, one or two young survive to fledge in about three months. These juvenile golden eagles usually attain full independence in the fall, after which they wander widely until establishing a territory for themselves in four to five years.
<br><br>
</p>
</section>

<section style="display:none;" id="starling">
<p>To see previous profile birds click the images on the left.</p><br><br>
<h2>Starling</h2>
<img class="smallImageRight" src="../images/bird3.jpg">
<p>Starlings are small to medium-sized passerine birds in the family Sturnidae. The name "Sturnidae" comes from the Latin word for starling, sturnus. Many Asian species, particularly the larger ones, are called mynas, and many African species are known as glossy starlings because of their iridescent plumage. Starlings are native to Europe, Asia and Africa, as well as northern Australia and the islands of the tropical Pacific. Several European and Asian species have been introduced to these areas as well as North America, Hawaii and New Zealand, where they generally compete for habitats with native birds and are considered to be invasive species. The starling species familiar to most people in Europe and North America is the common starling, and throughout much of Asia and the Pacific, the common myna is indeed common.
<br><br>
Starlings have strong feet, their flight is strong and direct, and they are very gregarious. Their preferred habitat is fairly open country, and they eat insects and fruit. Several species live around human habitation and are effectively omnivores. Many species search for prey such as grubs by "open-bill probing", that is, forcefully opening the bill after inserting it into a crevice, thus expanding the hole and exposing the prey; this behaviour is referred to by the German verb zirkeln.
</p>
</section>

</main>

<footer>
<p>All images copyrighted by Cool Twitchers</p>
</footer>

</body>
</html>

  1. 将错字documemt修复为document
  2. 声明test或将其从鼠标悬停事件中删除

答案 1 :(得分:0)

您的问题出在每个函数的document声明上。

您的代码是:

//check the "m" instead of "n" on the word "document"
documemt.getElementById("king").style.display = "block"; 

应该在什么时候出现:

document.getElementById("king").style.display = "block";