display를 변경시키는 메서드

style의 display를 변경시키는 메서드

1. show() hide()

2. fadeIn() fadeOut()

3. slideDown() slideUp()

 

 

+

eq()

선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다.

 

$("선택자").eq("숫자");

 

---

 

 

 

HTML

 

   <div class="tab">
      <button>aaa</button>
      <button>bbb</button>
      <button>ccc</button>
    </div>
    <div class="panel">
      <p class="a">aaa</p>
      <p class="b">bbb</p>
      <p class="c">ccc</p>
    </div>

 

CSS

p {
  border: 1px solid;
  padding: 20px 0;
  display: none;
}

 

jquery

   <script src="js/jquery-1.11.0.min.js"></script>
    <script>
      $(".tab>button").click(function () {
        var tabIndex = $(this).index();
        $(".panel>p").hide();
        $(".panel>p").eq(tabIndex).show();
      });
    </script>

 

결과

 

show()는 'style=display:block' 을 넣어주고

hide()는 'style=display:none'을 넣어준다.

 

 

코드 분석

버튼을 클릭하면, 클릭한 대상의 인덱스를 변수명에 담아, p태그를 일제히 숨기고, 해당하는 요소만을 보인다.

 

 

$(".tab>button").click(function () :: button을 누르는 click 이벤트 시작,

var tabIndex = $(this).index() :: 변수명 tabIndex 안에 클릭한 대상(this)의 index를 담는다.

 

$(".panel>p").hide(); :: p 태그의 display를 숨긴다. (display:none)
$(".panel>p").eq(tabIndex).show(); :: tabIndex를 보여준다 (display:block)

.eq :: 선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다.

 

 

 

 

ccc 버튼을 눌렀더니

모든 p 태그가 display: none; 이 되고

<p class="c">ccc</p> 에만 display: block이 들어가면서

ccc 패널만 보여진다.

 

---