하나만 활성화되어있는 동안 Jquery를 사용하여 다른 모든 클래스를 숨기기

Question

저는이 Jquery에 조금 익숙합니다. 무슨 일을하려고하면 링크를 사용하여 페이지의 요소를 보유하고있는 클래스를 토글합니다. 내가해야 할 일은 스크립트를 사용하여 한 링크의 요소를 호출하지만 다른 링크와 연관된 다른 요소를 모두 숨겨서 한 번만 링크를 클릭하면 해당 페이지의 요소를 가져올 수 있고 다른 모든 것은 가질 수 있습니다. 숨겨진. 나는 jquery에서 toggleclass 함수를 사용하고 있지만 사용자가 한 번 클릭하여 한 클래스의 요소를 활성화해야하지만 다른 링크를 클릭하기 전에 다시 클릭하여 제거해야합니다.

이것도 가능합니까? 내가 필요로하는 것처럼 보이는 자바 스크립트를 찾았지만 구현하기에 충분하지 않다.

저는 jquery가 좋을 것 같습니다. 왜냐하면 저는 괜찮은 생각을 가지고있는 것 같지만 전체적으로는 JavaScript가 아닙니다. (시행 착오를 통해 모든 종류의 속임수를 가르치고 있습니다)

Answer 1

요소를 반복 할 때 each()을 사용할 수 있습니다. 따라서 each() 내부에서 요소에 .hide()을 입력하면됩니다.

요소를 숨기기과 같을 것이다 :

$('#id).hide(); 

각 문서 is here합니다.

Answer 2

기본 및 간단한 솔루션

샘플 HTML :

<ul id="controls"> 
    <li><button data-value="#a" type="button">show a</button></li> 
    <li><button data-value="#b" type="button">show b</button></li> 
</ul> 

<div id="elements"> 
    <div id="a" class="element"></div> 
    <div id="b" class="element"></div> 
</div> 

스크립트 이 컨트롤의 ID 내부의 모든 버튼을 얻고의 데이터-value 속성에 할당 된 값으로 함수를 호출 toggleElements 전화 단추.

$(document).ready(function() { 
    $('#controls button').click(function() { 
     toggleElements($(this).attr('data-value')) 
    }); 
}); 

toggleElements 기능 검사 대상 일 경우/무언가를 가지고 있으며,이 모든 요소를 ​​숨기고 대상을 보여줍니다.

function toggleElements(target) { 
    if (target && $(target).length >0) { 
     $('element').hide(); 
     $(target).show(); 
    } 
} 

Answer 3

나는 바트의 대답을 좋아하지만 실제로 그의 질문에서 OP가 무엇을 설명 하려는지 확신 할 수 없다. OP, 문제가있는 그림을 더 잘 그릴 수있는 샘플 코드를 제공해 주시겠습니까? 나는 이런 식으로 뭔가를하고 싶어하는 OP를 상상했다.

// Your HTML something like... 
// Note: They can be any elements, divs, span, whatever, give element an id. 

<a id="alpha">Toggle type one</a> 
<a id="bravo">Toggle type two</a> 

<div class="typeOne"></div> 
<div class="typeOne"></div> 
<div class="typeTwo"></div> 
<div class="typeTwo"></div> 

// Your jQuery something like this: 

$('#alpha').click(function() { 
    $('.typeOne').show(); 
    $('.typeTwo').hide(); 
} 

$('#bravo').click(function() { 
    $('.typeTwo').show(); 
    $('.typeOne').hide(); 
} 

기본적으로 이렇게하면 모든 요소가 처음에 표시됩니다. 링크 id = "alpha"를 클릭하면 class = "typeOne"의 모든 요소가 표시되고 class = "typeTwo"의 요소는 숨겨집니다. 링크 id = "bravo"를 클릭하면 typeOne이 숨겨져 typeTwo가 표시됩니다.

Answer 4

정확한 상황이 무엇인지는 모르지만 구조에 따라 언제든지 .siblings()을 사용할 수 있습니다. 다음과 같은 설정을 가진 예를 들어

:

이

<div id="mydiv"> 
    <p id="p1">Something1</p> 
    <p id="p2">Something2</p> 
    <p id="p3">Something3</p> 
</div> 

귀하의 jQuery를 다음과 같이 보일 것이다는 :

$("#p1").show().siblings().hide(); 

이것은 당신의 CSS에서 display:hide; 세트를 가지고 있다고 가정합니다.

Answer 5

내가 아래에 만든 것을

간단한 메뉴 :

// jQuery를 코드 //

$(document).ready(function(){ 
     $('ul li', this).click(function(){ 
      $('#' + $(this).text()).css({display: 'block'}).siblings().hide() 
     }); 
    }); 

// HTML 코드 //

<div id="main"> 
    <ul> 
     <li>Home</li> 
     <li>Product</li> 
     <li>FAQ</li> 
     <li>Contact</li> 
    </ul> 
    <div id="content"> 
     <div id="Home">First DIV</div> 
     <div id="Product">Second DIV</div> 
     <div id="FAQ">Third DIV</div> 
     <div id="Contact">Fourth DIV</div> 
    </div> 
</div> 

// CSS //

ul { padding: 0px; margin: 0px; } 
li { float: left; width: auto; padding: 5px 50px 5px 50px; background: #999; color: #fff; list-style-type: none; border: 1px solid #333; } 
#content div { border-bottom: 1px solid #000; padding: 5px; clear: both; border-top: 1px solid white; display: none;} 
#content div#item4{ border-bottom: 1px solid white;} 
#main { border: 1px solid #000; float: left; }