자유 시간을 사용하여 JavaScript를 배울 때 단일 이미지를 탐색하는 예를 작성했습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<헤드>
<title> 이미지 갤러리 </제목>
<meta name = "generator"content = "editplus">
<meta name = "author"content = "">
<meta name = "keywords"content = "">
</head>
<script language = "javaScript">
함수 showpic (whitpic) {
var source = whatpic.getAttribute ( "href"); // 현재 클릭 한 요소의 속성 href 값을 얻습니다.
var 자리 표시 자 = document.getElementById ( "자리 표시 자"); // 대상을 얻습니다
위장기 .setattribute ( "src", source); // 그림을 변경하도록 대상 속성 SRC를 설정합니다
var text = whatpic.getAttribute ( "title"); // 현재 클릭 한 요소의 속성 제목 값 가져 오기
var description = document.getElementById ( "description");
description.firstchild.nodevalue = text; // 클릭 요소의 제목을 <p>에 할당합니다.
// 또는 description.ChildNodes [0] .nodevalue = text;
}
</스크립트>
<body>
<H1> JavaScript 사진 갤러리 </h1>
<ul>
<li>
<a href = "images/fireworks.jpg"onclick = "showpic (this); return false;"> pic1 </a>
</li>
<li>
<a href = "images/coffee.jpg"onclick = "showpic (this); return false;"> 그림 2 </a>
</li>
<li>
<a href = "images/rose.jpg"onclick = "showpic (this); return false;"> pic 3 </a>
</li>
<li>
<a href = "images/bigben.jpg"onclick = "showpic (this); return false;"> 그림 4 </a>
</li>
</ul>
<img id = "자리 표시 자"src = "images /placeholder.gif" />
<p id = "description"> 사진 선택. </p>
</body>
</html>
알아채다:
점프를 수행하지 않도록 태그에 이벤트를 추가하는 데주의를 기울여야합니다.
솔루션 : 함수는 false를 반환합니다. 이 행사는 링크가 클릭되지 않았다고 생각합니다.
HREF의 값이 JavaScript 인 경우 : void (0); 또한 점프 할 수 없습니다.