이 코드를 사용하여 간단한 탭을 만들고 잘 작동합니다.
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
내 질문은 가능한 경우 추가 next및 prev링크입니까?
시험:
$('#prev').click(function(){
$(".current").prev('li').find('a').click();
});
$('#next').click(function(){
$(".current").next('li').find('a').click();
});
==============================================
편집하다
추가 first및 last분류
<li class="current first"><a href="#tab-1">Tab 1</a></li>
<li class='last'><a href="#tab-4">Tab 4</a></li>
숨기기 prev처음
<span id='prev' style="display:none">prev</span>
과:
$(".tabs-menu a").click(function(event) {
event.preventDefault();
var li = $(this).parent();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
//new code
if (li.hasClass('first')) {
$('#prev').hide();
} else {
$('#prev').show();
}
if (li.hasClass('last')) {
$('#next').hide();
} else {
$('#next').show();
}
});
및 데모
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다