자바 스크립트를 사용하여 <section> 요소 표시 / 숨기기

다니엘 쉴즈

간단한 HTML / 자바 스크립트 코드를 테스트하고 있지만 사이트를 열면 표시 / 숨기기 스크립트가 첫 번째 섹션 만 숨기고 다른 섹션에는 아무 작업도 수행하지 않습니다. 클릭 한 모든 이미지에 대해 해당 이미지에 해당하는 섹션이 표시되도록하고 싶습니다.

다음은 코드입니다.

<!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>

도움을 주시면 감사하겠습니다.

XueLong92

<!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. 수정 오타 documemtdocument
  2. test마우스 오버 이벤트에서 선언 또는 제거

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

자바 스크립트 또는 jquery를 사용하여 2 개의 다른 요소 숨기기 및 표시

분류에서Dev

자바 스크립트 만 사용하여 스크롤시 요소 표시 / 숨기기

분류에서Dev

자바 스크립트를 사용하여 HTML 요소 숨기기

분류에서Dev

자바 스크립트에서 요소 숨기기 / 표시

분류에서Dev

HTML <DIV> 자바 스크립트를 사용하여 숨기기 / 표시

분류에서Dev

여러 div 요소를 표시하고 숨기는 자바 스크립트 토글

분류에서Dev

자바 스크립트를 사용하여 입력 파일 요소를 표시하거나 숨기려면 확인란을 선택 / 선택 취소합니다.

분류에서Dev

자바 스크립트를 사용하여 양식 내 일부 요소 숨기기 해제 및 숨기기

분류에서Dev

자바 스크립트를 사용하여 부트 스트랩 도구 설명 표시 및 숨기기

분류에서Dev

MVC를 사용하여 스크립트 및 / 또는 Razor 모델보기에서 요소 표시 및 숨기기

분류에서Dev

onclick 이벤트 자바 스크립트를 사용하여 두 가지 양식 숨기기 및 표시

분류에서Dev

자바 스크립트를 사용하는 숨김 표시 기능 중 오류

분류에서Dev

자바 스크립트를 사용하여 마우스 아웃시 표 숨기기

분류에서Dev

버튼 클릭 자바 스크립트를 사용하여 하위 div가있는 div 표시 / 숨기기

분류에서Dev

자바 스크립트를 사용하여 양식을 제출하지 않고 div 숨기기 / 표시

분류에서Dev

자바 스크립트를 사용하여 드롭 다운 숨기기 및 표시

분류에서Dev

자바 스크립트를 사용하여 탐색 모음 숨기기 및 표시

분류에서Dev

자바 스크립트를 사용하여 요소 크기 늘리기

분류에서Dev

자바 스크립트를 사용하여 테두리를 표시하거나 숨기는 방법

분류에서Dev

자바 스크립트 개체를 사용하여 이미지를 표시하거나 숨기는 방법

분류에서Dev

사용자 지정 지시문, ng-show 및 $ scope를 사용하여 Angularjs에서 요소 숨기기 / 표시

분류에서Dev

자바 스크립트를 사용하여 자식 요소 값 가져 오기

분류에서Dev

자바 스크립트를 사용하여 <a> 태그에 img 요소 만들기

분류에서Dev

자바 스크립트를 사용하여 div 숨기기

분류에서Dev

AngularJS-JS / 스크립트를 사용하지 않고 요소 숨기기 및 표시

분류에서Dev

자바 스크립트 배열의 데이터를 기반으로하는 표시 요소

분류에서Dev

자바 스크립트를 사용하여 텍스트 상자를 기반으로 드롭 다운을 표시하거나 숨기는 방법

분류에서Dev

Angular2 / Typescript를 사용하여 표시 할 문자열이 없을 때 요소 숨기기 중지

분류에서Dev

자바 스크립트 및 CSS를 사용하여 표시 / 숨길 수 없음

Related 관련 기사

  1. 1

    자바 스크립트 또는 jquery를 사용하여 2 개의 다른 요소 숨기기 및 표시

  2. 2

    자바 스크립트 만 사용하여 스크롤시 요소 표시 / 숨기기

  3. 3

    자바 스크립트를 사용하여 HTML 요소 숨기기

  4. 4

    자바 스크립트에서 요소 숨기기 / 표시

  5. 5

    HTML <DIV> 자바 스크립트를 사용하여 숨기기 / 표시

  6. 6

    여러 div 요소를 표시하고 숨기는 자바 스크립트 토글

  7. 7

    자바 스크립트를 사용하여 입력 파일 요소를 표시하거나 숨기려면 확인란을 선택 / 선택 취소합니다.

  8. 8

    자바 스크립트를 사용하여 양식 내 일부 요소 숨기기 해제 및 숨기기

  9. 9

    자바 스크립트를 사용하여 부트 스트랩 도구 설명 표시 및 숨기기

  10. 10

    MVC를 사용하여 스크립트 및 / 또는 Razor 모델보기에서 요소 표시 및 숨기기

  11. 11

    onclick 이벤트 자바 스크립트를 사용하여 두 가지 양식 숨기기 및 표시

  12. 12

    자바 스크립트를 사용하는 숨김 표시 기능 중 오류

  13. 13

    자바 스크립트를 사용하여 마우스 아웃시 표 숨기기

  14. 14

    버튼 클릭 자바 스크립트를 사용하여 하위 div가있는 div 표시 / 숨기기

  15. 15

    자바 스크립트를 사용하여 양식을 제출하지 않고 div 숨기기 / 표시

  16. 16

    자바 스크립트를 사용하여 드롭 다운 숨기기 및 표시

  17. 17

    자바 스크립트를 사용하여 탐색 모음 숨기기 및 표시

  18. 18

    자바 스크립트를 사용하여 요소 크기 늘리기

  19. 19

    자바 스크립트를 사용하여 테두리를 표시하거나 숨기는 방법

  20. 20

    자바 스크립트 개체를 사용하여 이미지를 표시하거나 숨기는 방법

  21. 21

    사용자 지정 지시문, ng-show 및 $ scope를 사용하여 Angularjs에서 요소 숨기기 / 표시

  22. 22

    자바 스크립트를 사용하여 자식 요소 값 가져 오기

  23. 23

    자바 스크립트를 사용하여 <a> 태그에 img 요소 만들기

  24. 24

    자바 스크립트를 사용하여 div 숨기기

  25. 25

    AngularJS-JS / 스크립트를 사용하지 않고 요소 숨기기 및 표시

  26. 26

    자바 스크립트 배열의 데이터를 기반으로하는 표시 요소

  27. 27

    자바 스크립트를 사용하여 텍스트 상자를 기반으로 드롭 다운을 표시하거나 숨기는 방법

  28. 28

    Angular2 / Typescript를 사용하여 표시 할 문자열이 없을 때 요소 숨기기 중지

  29. 29

    자바 스크립트 및 CSS를 사용하여 표시 / 숨길 수 없음

뜨겁다태그

보관