테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

제이쿼리 탭 질문입니다 채택완료

지굴 10년 전 조회 3,936
답변 3
목록

안녕하세요.  

 

아래 링크의 제이쿼리 탭을 쓰려고 하는데요.


http://jqueryui.com/tabs/#default">http://jqueryui.com/tabs/#default

 

하나는 간단한데.. 한 페이지에 아래 이미지처럼 두개를 사용하려면 어떻게 하면 되나요.

 

제이쿼리는 초보라 부탁드립니다. 

 



 

#jquery #제이쿼리 #탭 #tab
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
w
webs
10년 전
<script>
$(function() {
   $( "#tabs1" ).tabs();
   $( "#tabs2" ).tabs();
});
</script>

<div id="tabs1">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>내용</p>
  </div>
  <div id="tabs-2">
    <p>내용</p>
  </div>
  <div id="tabs-3">
    <p>내용</p>
  </div>
</div>

<div id="tabs2">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>내용</p>
  </div>
  <div id="tabs-2">
    <p>내용</p>
  </div>
  <div id="tabs-3">
    <p>내용</p>
  </div>
</div>

위와 같이 element와 함수를 추가해주시면 됩니다.
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
지굴
10년 전
너무 감사합니다~ 잘 되네요 좋은하루 되세요.

댓글을 작성하려면 로그인이 필요합니다.

드

제이쿼리ui는 쓰기가 간편해서 좋아요.

 

아래쪽보시면 눈알아이콘에 view source있죠.

 

그걸 누르시면 소스가 나오는데요.

 

</p><p>$(function(){</p><p>    $("#tabs").tabs();</p><p>});</p><p>

 

이게 jquery-ui tabs를 적용한다는거에요.

 

#tabs에 적용하는거니 두개의 탭을 하신다면 tabs1, tabs2 이렇게 아이디를 만드셔서

 

$("#tabs1").tabs();

$("#tabs2").tabs();

 

이렇게 하셔도 되고요.

 

공통으로 사용할 클래스를 하나 만드셔서 그거에는 전체적으로 tabs를 적용하셔도되요.

 

탭을 감싸는거에 <div class="jquiTabs"></div> 이렇게 클래스를 주시고 위에서 적용하는걸 아이디대신 클래스로

 

$(".jquiTabs").tabs();

 

이렇게 해주시면 jquiTabs라는 클래스를 가지는 것들에 제이쿼리ui의 tabs가 적용되요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
지굴
10년 전
너무 감사합니다~ 친절한 설명 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

제

현재 어디에 어떻게 적용할지를 모르니, 뭐라고 댓글을 써야 할지 모르겠습니다.

우선 잘 모르신다면 많은 예제를 보시는게 좋을것 같습니다.

주로 탭을 최신글에 많이 사용을 하게 되는데...

 

제이쿼리와 최신글을 적절히 사용을 하셔야 하시구요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인