클릭시 img border = #color - 여러 이미지 - 한 번에 1 개만 강조 표시해야합니다.

기본적으로 이미지 목록 (10 개라고 가정 해 봅시다)을 만들고이 이미지 중 하나를 클릭하면 테두리 특정 색상으로 변경; 현재 JS와의 간단한 onClick 이벤트로이를 수행합니다. 그건 문제가 아니야. 문제는 두 번째 또는 세 번째 또는 네 번째 이미지를 클릭 할 때 발생합니다. 클릭 한 모든 이미지는 물론 강조 표시되어 있습니다. 테두리 색이 변경된 상태로 세트에서 선택된 마지막 (현재) 이미지 만 남아 있도록 설정하고 싶습니다.클릭시 img border = #color - 여러 이미지 - 한 번에 1 개만 강조 표시해야합니다.

이 간단한 효과를 얻는 가장 좋은 방법은 무엇입니까?

출처

2010-07-30 Z with a Z

을 소화하는 것은 간단한 작업 예입니다

<!doctype html> 
    <html> 
     <head> 
      <title>Website.com</title> 

      <style type="text/css"> 
      .normal { 
       border:none; 
      } 
      .highlighted { 
      border:1px solid #336699; 
      } 
      </style> 

      <script type="text/javascript"> 


      var ImageSelector = function() { 
       var imgs = null; 
       var selImg = null; 

       return { 
       addImages: function(container) { 
        imgs = container.getElementsByTagName("img"); 
        for(var i = 0, len = imgs.length; i < len; i++) { 
         var img = imgs[i]; 
         img.className = "normal"; 
         img.onclick = function() { 
          if(selImg) { 
          selImg.className = "normal"; 
          } 
          this.className = "highlighted"; 
          selImg = this; 
         }; 
        } 
       } 
       }; 
      }(); 

      </script> 

     </head> 
     <body> 
      <div> 
       <div id="menu"> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
       </div> 
      </div> 

      <script type="text/javascript"> 

       var div = document.getElementById("menu"); 
       ImageSelector.addImages(div); 

      </script> 
     </body> 
    </html>

이것은 jQuery와 같은 어떤 라이브러리를 사용하지 않습니다. 그것의 평범한 'ol js. 또한 코드는 예제를위한 것입니다

출처

2010-07-30 18:48:37 naikus

간단합니다! 감사합니다 –

@ Z로, 당신은 환영합니다! – naikus

'this.style.border = "1px 단색 파란색"; for 루프를 for 루프의 바깥쪽으로 이동합니다 (바로 아래로). 한 번만 호출하면됩니다. –

jQuery를 활용할 것입니다. 각 이미지에 클래스 (예 : "imageHighlight"등)를 지정하십시오. 그리고이 같은 (완전히 테스트되지 않은) 할 수있는 :

$(document).ready(function() { 
    $('img.imageHighlight').click(function() { 
     $('img.imageHighlight').css('border-width', 0); 
     $(this).css('border-width', '3px'); 
    }); 
});

를 그리고 일부 CSS가 :

img.imageHighlight { 
    border: 0px solid #345678; 
}

CSS 클래스 또는 무언가를 토글하여 그것을 할 수있는 더 좋은 방법은, 심지어 거기에 아마를하지만, 나는 지금 게으르다. 아직 점심 : 아래

출처

2010-07-30 18:41:05

나는 그것을 줄 것이다. 의견을 보내 주셔서 감사합니다. –

클릭시 img border = #color - 여러 이미지 - 한 번에 1 개만 강조 표시해야합니다.

답변

관련 문제