CSS/Javascript CSS 클래스를 사용하여 DIV 표시/숨기기?

Question

나는 봤 거든 DIV 내용을 숨기고 보여주기를위한 많은 원본을 단추 누르기에 토글로 발견했다.

하지만 ID를 사용하여 작업합니다.

같은 일을하고 싶습니다.하지만 ID 대신 클래스를 사용하여 20 개의 DIV 토글을 갖고 싶다면 ... 추가 코드를 추가 할 필요가 없습니다.

<script language="javascript"> 
function toggle() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
     text.innerHTML = "show"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "hide"; 
    } 
} 
</script> 

<a id="displayText" href="javascript:toggle();">show</a> <== click Here 
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div> 

사람이 함께하시기 바랍니다 도와 드릴까요 : 여기

몇 가지 코드?

감사

Answer 1

jquery는 옵션입니까? 이 않기 때문에 희망 그래서, 당신이 원하는 : jQuery를 선택기를 사용

http://api.jquery.com/toggle/

$(".class").toggle(); 
or 
$(".class").show(); $(".class").hide(); 

Answer 2

하지 이것은 당신이 컨테이너 사업부 내에서 숨긴 다음 그 사업부를 숨길

$('.classname').hide(); 

또는 그룹의 모든 요소가 될 것이다. jQuery를 사용

Answer 3

:

classname 클래스의 이름입니다

$(".classname").hide(); 

.

Answer 4

, 당신은에 의해 ID 찾을 수 있습니다 그 클래스를 선택하는 변경

$("#id") 

하는 것은 간단하다 :

$(".className") 

jQuery를 사용하지 않고 조금 더 사소한 일은 없지만 확인할 수는 있습니다. SO 어떤 도움을 질문한다 : 그것은 대신 ID의 클래스입니다 제외하고 당신은 단순히 $(".somthing")이 $("#somthing")으로 동일한 작업을 수행 $(".className").hide();

를 사용할 수

How to getElementByClass instead of GetElementById with Javascript?

Answer 5

.

Answer 6

대부분의 jQuery 답변은 매우 쉽게 작성해야하지만 예를 들어 정규 JS로 보는 것이 JS에서 수행하는 방법입니다.

잠재적 인 단점 : getElementsByTagName을 지원하지 않는 브라우저. 나는 IE7을 테스트 해 보았지만 제대로 동작하지는 않습니다.

var divs = document.getElementsByTagName('div'); 

var toggle = function() {  
    for (var i = 0, l = divs.length; i < l; i++) { 
     if (divs[i].getAttribute('class') == 'problem') 
      if (divs[i].style.display == 'none') divs[i].style.display = ''; 
      else divs[i].style.display = 'none'; 
    } 
} 

document.getElementById('Toggle').onclick = toggle; 

것은 밖으로을보십시오 : http://jsfiddle.net/robert/PkHYf/

Answer 7

다른 사람들이 말했듯이 여러 번,이 JQuery와 선택과 .hide 방법을 사용하여 jQuery를에 용이하다. 그러나 일반적인 의미에서 묻는 것이므로 프레임 워크가 없으면 어떻게 하는지를 아는 것이 좋습니다. 이는 완전한 대답이 아닙니다.

1. JQuery와 방법 : 여기

   는 옵션입니다. jQuery 선택기와 .hide() 메소드 만 사용하면된다.

   $ ("CLASSNAME.") 숨기기()

2. 바닐라 JS :. 동적 CSS. 한 가지 방법은 동적 문서 헤드에 스타일 시트를 추가하는 것입니다 - 당신은 Alter CSS class attributes with javascript?

3. 바닐라 JS을 수행 할 수 있습니다 직접 CSS를 수정

   var ss = document.styleSheets; 
       for (var i=0; i<ss.length; i++) { 
        var rules = ss[i].cssRules || ss[i].rules; 
   
        for (var j=0; j<rules.length; j++) { 
         if (rules[j].selectorText === ".classname") { 
          rules[j].style.visibility = "none"; 
         } 
        } 
       }