Jquery 슬라이딩 탭 - 어떻게 톱 메뉴를 비활성화 할 수 있습니까?

Question

jquery 슬라이딩 탭의 톱 메뉴를 비활성화하려고합니다. 이전 탭/다음 탭에서만 탭이 작동하도록합니다.

내 Live Demo을 참조하십시오.

JQuery와 :

<script> 
$(document).ready(function() { 
    // Horizontal Sliding Tabs demo 
    $('div#st_horizontal').slideTabs({ 
     // Options    
     contentAnim: 'slideH', 
     contentAnimTime: 600, 
     contentEasing: 'easeInOutExpo', 
     tabsAnimTime: 300 
    }); 

    $(".st_tab_view").each(function(i) { 
     var totalSize = $(".st_tab_view").size() - 1; 
     if (i != totalSize) { 
      next = i + 2; 
      $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>"); 
     } 
     if (i !== 0) { 
      prev = i; 
      $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>"); 
     } 
    }); 

    $('.prev-tab').click(function() { 
     $('.st_tab_active').parent().prev().children('a').trigger('click'); 
     return false; 
    }); 

    $('.next-tab').click(function() { 
     $('.st_tab_active').parent().next().children('a').trigger('click'); 
     return false; 
    }); 


});​ 
</script> 

Answer 1

"

수평 탭 # 1

이처럼 jQuery를 수정합니다. 'st_tab_active.'. var tab = $ ('.st_tab_active'). parent(). 이전(). 어린이 ('a'); tab.removeAttr ('disabled'); 탭. 트리거 ('클릭'); // tab.attr ('사용 중지됨', '사용 중지됨'); 반환 거짓 : });

$('.next-tab').click(function() { 
    $('.st_tab_active').attr('disabled','disabled'); 
    var tab= $('.st_tab_active').parent().next().children('a'); 
    tab.removeAttr('disabled'); 
    tab.trigger('click'); 
    //tab.attr('disabled','disabled'); 
    return false; 
}); 

"

Answer 2

변경 다음 CSS :

div.st_horizontal div.st_tabs_container { /* Tabs main container */   
    position:relative; 
    /* This will hide it all together */ 
    display:none; 
    z-index:100;  
    /* Or change with and heights */  
    width:0% !important;  
    height:0px; 
    margin-bottom:-1px;  
    overflow:hidden; 
} 

또는, 기본 덮어 쓰기 저장 (JQuery와 UI CSS가 추가되는 경우 이후) 페이지에 더 CSS를 추가 할 수 있습니다 CSS :

div.st_horizontal div.st_tabs_container { 
    /* This will hide it all together */ 
    display:none; 
    /* Or change with and heights */  
    width:0% !important;  
    height:0px; 
} 

그렇지 않으면 나 자신의 컨트롤을 작성하는 것이 좋습니다.

둘 중 하나가 jQuery 코드로 저장됩니다! ('이전 탭을.')

$() {( $를 (기능을 클릭) ATTR -