웹 페이지에 일련의 이미지를 표시하고 싶습니다.특정 그룹 다시로드
웹 사이트는 서버 측 언어없이 정적입니다.
전체 페이지를 다시로드하지 않고 클릭 한 후 img1, img2, img3 등 웹 사이트로드 종류를 설정하는 방법이 있습니까?
나는 HTML과 CSS에 상당히 익숙하지만 필요한 경우 JavaScript에 대한 정보를 제공하고자합니다.
포인트는 사이트로드가 가능한 한 적게하는 것입니다. 다른 팁은 크게 감사하겠습니다.
다른 웹 사이트 최적화가있는 경우 보너스를 생각하지 않습니다.
당신은 빈 src 속성으로 HTML에 이미지 태그를 만들 수 있습니다당신은 허용 대답을 가지고 있지만 여기 정확히
$(document).ready(function() {
var check=0;
$('#btn1').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("#img1").attr('src', 'url1');
check++;
} else {
if(check==0){
$("#img1").attr('src', 'url2');
}else{ $("#img1").attr('src', 'url3');}
}
$(this).data("clicks", !clicks);
});
});
작업 jQuery를 CLICK
HTML
<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
<img id="img1" src="">
</div>
에 DIV를 교체 찾고 있던 무엇 있지만 DEMO
감사합니다! 나는 약간의 좌절감을 느끼기 시작했다. 정말로 대답에 감사한다! – Techmatt00
: 자바 스크립트를 통해
<img src="" id="image-1">
<img src="" id="image-2">
<img src="" id="image-3">
<a href="#" id="but-1">Load image 1</a>
<a href="#" id="but-2">Load image 2</a>
<a href="#" id="but-3">Load image 3</a>
그런 다음, 각 링크에 클릭 이벤트를 수신하고, 각 이미지의 SRC를 채울 수 있습니다 :
를document.getElementById('but-1').on("click", function(){
document.getElementById("image-1").src="path/to/image.jpg";
})
document.getElementById('but-2').on("click", function(){
document.getElementById("image-2").src="path/to/second-image.jpg";
})
//... and so on
그런 식으로 링크를 클릭 할 때마다 각각의 이미지가로드됩니다.
이렇게하려면 JavaScript가 필요합니다. 이런 식으로 : http://jsfiddle.net/yMzX9/133/ (적응 : http://jsfiddle.net/GloverDonovan/yMzX9/). jQuery click() 및 toggle() 이벤트를 살펴 보는 것도 도움이 될 수 있습니다. –
흠 나는 내가 투표를 잘못했다고 확신하지 못했지만 나는 확실히 내 질문을 연구했지만 PHP 사용과 관련이없는 대답을 찾을 수 없었다. 어쨌든 알렉스 나는 당신의 대답이 이미지를 보이게하거나 보이지 않게 만드는 방법임을 알아 차렸다. 내가 찾고있는 것은 더 이상 첫 번째 이미지를 표시하지 않고 div를 다른 이미지로로드하는 방법입니다. 일종의 img1 ... 클릭 ... img2 ... 클릭 .... img3 – Techmatt00
이 질문은 조금 더 "연구"로 대답 할 수 있습니다. 이 검색의 주요 결과 (https://www.google.com/search?q=show+image+after+click&oq=show+image+after+click&aqs=chrome..69i57j0l3.5033j0j7&sourceid=chrome&es_sm=122&ie)를 읽어보십시오. = UTF-8 # q = html + show + image + after + click –