顯示隱藏<section>使用javascript的元素
[英]show/hide <section> element using javascript
問題描述
我正在測試一些簡單的 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 個解決方案
解決方案1
1 已采納 2019-12-06 18:18:38
<!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>
- 修正錯字
documemt到document - 聲明
test或將其從鼠標懸停事件中刪除
解決方案2
0 2019-12-06 18:11:23
您的問題在於每個函數的document聲明。
你的代碼是：
//check the "m" instead of "n" on the word "document"
documemt.getElementById("king").style.display = "block";
什么時候應該是：
document.getElementById("king").style.display = "block";
使用JavaScript顯示/隱藏表單的某些部分。 如何一次只顯示一個部分？
[英]Show/hide certain sections of a form using JavaScript. How to only show one section at a time?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.