Tab dọc với JQuery?

Question

Tôi muốn các tab dọc theo phía bên trái của trang thay vì trên đầu trang. Tôi đã tải jQuery vì các lý do khác (các hiệu ứng), vì vậy tôi thích sử dụng jQuery cho một khung công tác UI khác. Tìm kiếm trên các liên kết sản phẩm "tab dọc jquery" có liên quan đến các công việc đang được tiến hành.

Làm cho các Tab dọc hoạt động trên các trình duyệt đầy hay không, một khi bạn có giải pháp, có vẻ như không đáng giá để đăng mã mẫu?

Answer 1

Tôi không mong đợi các tab dọc cần Javascript khác nhau từ các tab ngang. Điều duy nhất khác với CSS là hiển thị các tab và nội dung trên trang. JS cho các tab thường không nhiều hơn hiển thị/ẩn/có thể tải nội dung.

Answer 2

Hãy thử ở đây:

http://www.sunsean.com/idTabs/

Một nhìn vào tab Tự do có thể có những gì bạn cần.

Hãy cho tôi biết nếu bạn tìm thấy thứ gì đó bạn thích. Tôi đã làm việc trên chính xác cùng một vấn đề một vài tháng trước và quyết định thực hiện bản thân mình. Tôi thích những gì tôi đã làm, nhưng nó có thể là tốt đẹp để sử dụng một thư viện chuẩn.

Answer 3

Hãy xem Listamatic. Các tab là ngữ nghĩa chỉ là một danh sách các mục được tạo kiểu theo một cách cụ thể. Bạn thậm chí không nhất thiết cần javascript để làm cho các tab dọc hoạt động như các ví dụ khác nhau tại chương trình Listamatic.

Answer 4

Tôi đã tạo menu dọc và các tab thay đổi ở giữa trang. Tôi đã thay đổi hai từ trên mã nguồn và tôi để riêng hai divs khác nhau

menu:

<div class="arrowgreen"> 
    <ul class="tabNavigation"> 
    <li> <a href="#first" title="Home">Tab 1</a></li> 
    <li> <a href="#secund" title="Home">Tab 2</a></li> 
    </ul> 
</div> 

nội dung:

<div class="pages"> 
    <div id="first"> 
    CONTENT 1 
    </div> 
    <div id="secund"> 
    CONTENT 2 
    </div> 
</div> 

mã làm việc với các div ngoài

$(function() { 
    var tabContainers = $('div.pages > div'); 

    $('div.arrowgreen ul.tabNavigation a').click(function() { 
     tabContainers.hide().filter(this.hash).show(); 

     $('div.arrowgreen ul.tabNavigation a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
}); 

Answer 5

Hãy xem the jQuery UI vertical Tabs Docu. Tôi thử nó, nó hoạt động tốt.

<style type="text/css"> 
/* Vertical Tabs 
----------------------------------*/ 
.ui-tabs-vertical { width: 55em; } 
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } 
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
.ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } 
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} 
</style> 

<script> 
    $(document).ready(function() { 
     $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix'); 
     $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left'); 

    }); 
</script> 

Answer 6

tùy chọn khác là jQuery tab mb.extruder Matteo Bicocchi của plug-in: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Answer 7

//o_O\\ (Poker Face) i know its late 

chỉ cần thêm beloww phong cách css

<style type="text/css"> 

    /* Vertical Tabs ----------------------------------*/ 
.ui-tabs-vertical { width: 55em; } 
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } 
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
.ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } 
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} 

</style> 

CẬP NHẬT! http://jqueryui.com/tabs/#vertical

Answer 8

chức năng siêu đơn giản mà sẽ cho phép bạn tạo ra các cấu trúc tab/accordion của riêng bạn ở đây: http://jsfiddle.net/nabeezy/v36DF/

bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) { 
     //Dependent on jQuery 
     //PARAMETERS 
     //tabClass: 'the class name of the DOM elements that will be clicked', 
     //tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)', 
     //contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked', 
     //contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)', 
     //MUST call bindSets() after dom has rendered 

     var tabs = $('.' + tabClass); 
     var tabContent = $('.' + contentClass); 
     if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')}; 
     tabs.each(function (index) { 
      this.matchedElement = tabContent[index]; 
      $(this).click(function() { 
       tabs.each(function() { 
        this.classList.remove(tabClassActive); 
       }); 
       tabContent.each(function() { 
        this.classList.add(contentClassHidden); 
       }); 
       this.classList.add(tabClassActive); 
       this.matchedElement.classList.remove(contentClassHidden); 
      }); 
     }) 
     tabContent.each(function() { 
      this.classList.add(contentClassHidden); 
     }); 

     //tabs[0].click(); 
    } 
bindSets('tabs','active','content','hidden');