클릭 할 때 개별 img 링크에 대해 다른 div 태그 표시

클릭하면 특정 DIV를 표시해야하는 4 개의 이미지 링크가 있습니다. 그런 다음 나머지 3 개의 이미지 중 하나를 클릭하면 해당 DIV가 마지막 DIV를 숨기는 동안 표시됩니다. 여러 가지 방법으로 시도했지만 필요한 방식대로 진행할 수 없습니다. 4 개의 DIV는 페이지의 동일한 공간을 차지합니다. 누구든지 도와 줄 수 있습니까? 여기클릭 할 때 개별 img 링크에 대해 다른 div 태그 표시

내가 지금까지 HTML 설정 한 방법입니다 (

<div id="content"> 

    <div id="info"> 
    <a href="#"><img src="../Images/yellowbutton.png" class="infolink" /></a> 
    <a href="#"><img src="../Images/redbutton.png" class="infolink"/></a> 
    <a href="#"><img src="../Images/greenbutton.png" class="infolink" /></a> 
    <a href="#"><img src="../Images/bluebutton.png" class="infolink"/></a> 

     <div id="level0">This is the home page for the levels</div> 
     <div id="level1">this is the information on level 1</div>   
     <div id="level2">this is the information on level 2</div> 
     <div id="level3">this is the information on level 3</div> 
     <div id="level4">this is the information on level 4</div> 

    </div> 
</div>

출처

2013-08-09 Chris Ellis

당신은, 다음 코드는 원하는 동작을 수행 css 및 javascript

를 사용하여 div의의 가시성을 변경할 수 있습니다 나는 경우 그것을 올바르게 이해 :-)) :

<html> 
<head> 
<script> 
function selectItem(item) { 
    var availableItems = document.getElementsByClassName("itemToShow"); 

    for (var i=0;i<availableItems.length;i++) { 
     if (availableItems[i].id == item) { 
      availableItems[i].style.display = "block"; 
     } else { 
      availableItems[i].style.display = "none"; 
     } 
    } 
} 
</script> 

</head> 
<body> 
<div id="content"> 

    <div id="info"> 
    <a href="#" onclick="selectItem('level1')"><img src="../Images/yellowbutton.png" class="infolink" /></a> 
    <a href="#" onclick="selectItem('level2')"><img src="../Images/redbutton.png" class="infolink"/></a> 
    <a href="#" onclick="selectItem('level3')"><img src="../Images/greenbutton.png" class="infolink" /></a> 
    <a href="#" onclick="selectItem('level4')"><img src="../Images/bluebutton.png" class="infolink"/></a> 

     <div id="level0">This is the home page for the levels</div> 
     <div id="level1" class="itemToShow">this is the information on level 1</div>   
     <div id="level2" style="display:none;" class="itemToShow">this is the information on level 2</div> 
     <div id="level3" style="display:none;" class="itemToShow">this is the information on level 3</div> 
     <div id="level4" style="display:none;" class="itemToShow">this is the information on level 4</div> 

    </div> 
</div> 
</html>

기본 아이디어는 앵커가 clicke 일 때 자바 스크립트 함수를 호출합니다. d, 표시해야하는 DIV의 ID를 전달합니다.

그런 다음 javascript 기능에서 CSS 클래스 (itemToShow)로 DIV를 선택하십시오. 선택된 각 DIV에 대해 ID가 통보 된 DVE와 같으면 style="display:block"을, 그렇지 않으면 style="display:none"을 설정하십시오.

출처

2013-08-09 17:53:15 Crferreira

클릭 할 때 개별 img 링크에 대해 다른 div 태그 표시

답변

관련 문제