제이쿼리 탭 질문입니다
본문
안녕하세요.
아래 링크의 제이쿼리 탭을 쓰려고 하는데요.
http://jqueryui.com/tabs/#default
하나는 간단한데.. 한 페이지에 아래 이미지처럼 두개를 사용하려면 어떻게 하면 되나요.
제이쿼리는 초보라 부탁드립니다.
답변 3
<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와 함수를 추가해주시면 됩니다.
너무 감사합니다~ 잘 되네요 좋은하루 되세요.
제이쿼리ui는 쓰기가 간편해서 좋아요.
아래쪽보시면 눈알아이콘에 view source있죠.
그걸 누르시면 소스가 나오는데요.
$(function(){
$("#tabs").tabs();
});
이게 jquery-ui tabs를 적용한다는거에요.
#tabs에 적용하는거니 두개의 탭을 하신다면 tabs1, tabs2 이렇게 아이디를 만드셔서
$("#tabs1").tabs();
$("#tabs2").tabs();
이렇게 하셔도 되고요.
공통으로 사용할 클래스를 하나 만드셔서 그거에는 전체적으로 tabs를 적용하셔도되요.
탭을 감싸는거에 <div class="jquiTabs"></div> 이렇게 클래스를 주시고 위에서 적용하는걸 아이디대신 클래스로
$(".jquiTabs").tabs();
이렇게 해주시면 jquiTabs라는 클래스를 가지는 것들에 제이쿼리ui의 tabs가 적용되요.
너무 감사합니다~ 친절한 설명 감사합니다.
현재 어디에 어떻게 적용할지를 모르니, 뭐라고 댓글을 써야 할지 모르겠습니다.
우선 잘 모르신다면 많은 예제를 보시는게 좋을것 같습니다.
주로 탭을 최신글에 많이 사용을 하게 되는데...
제이쿼리와 최신글을 적절히 사용을 하셔야 하시구요.
답변을 작성하시기 전에 로그인 해주세요.
