Tab dọc với JQuery?

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

Việc để các Tab dọc hoạt động trên các trình duyệt là khó khăn hay nó quá tầm thường đến mức, một khi bạn đã có giải pháp, thì việc đăng mã ví dụ có vẻ không đáng?

Hãy xem Docu các Tab dọc của giao diện người dùng jQuery . 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>

Thử ở đây:

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

Xem qua 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 đã giải quyết cùng một vấn đề cách đây vài tháng và quyết định tự thực hiện. Tôi thích những gì tôi đã làm, nhưng có lẽ sẽ rất tuyệt nếu sử dụng một thư viện tiêu chuẩn.

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

thực đơn:

<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ã hoạt động với 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();
});

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

chỉ cần thêm phong cách css dưới đây

<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

Tôi sẽ không mong đợi các tab dọc cần Javascript khác với các tab ngang. Điều duy nhất sẽ khác là CSS để 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 là hiển thị / ẩn / có thể tải nội dung.

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

Hãy xem Listamatic . Về mặt ngữ nghĩa, các tab 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 phải cần javascript để làm cho các tab dọc hoạt động như các ví dụ khác nhau tại Listamatic show.

chức năng siêu đơn giản cho phép bạn tạo cấu trúc tab / accordion của riêng mình tại đâ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');