JQuery를 사용하는 수직 탭?

나는 상단을 가로 지르는 대신 페이지의 왼쪽을 따라 탭을 원한다. 다른 이유 (효과)로 인해 이미 jQuery를로드하고 있으므로 다른 UI 프레임 워크에 jQuery를 사용하는 것을 선호합니다. "vertical tabs jquery"를 검색하면 진행중인 작업에 대한 링크가 생성됩니다.

세로 탭이 여러 브라우저에서 작동하도록하는 것입니까, 아니면 솔루션이 있으면 예제 코드를 게시 할 가치가없는 것처럼 보입니까?

jQuery UI vertical Tabs Docu를 살펴보십시오 . 나는 그것을 시도해 보았습니다.

<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>

여기에서 시도하십시오 :

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

자유 탭을 살펴보면 필요한 것이있을 수 있습니다.

마음에 드는 것을 찾으면 알려주세요. 나는 몇 달 전에 똑같은 문제를 해결하고 스스로 구현하기로 결정했습니다. 나는 내가 한 일을 좋아하지만 표준 라이브러리를 사용하는 것이 좋을 수도 있습니다.

페이지 중간에 변경되는 수직 메뉴와 탭을 만들었습니다. 코드 소스에서 두 단어를 변경하고 두 개의 다른 div를 구분했습니다.

메뉴:

<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> 

함유량:

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

코드는 div와 별도로 작동합니다.

$(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

아래 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>

업데이트되었습니다! http://jqueryui.com/tabs/#vertical

나는 수직 탭이 수평 탭과 다른 자바 스크립트를 필요로한다고 생각하지 않을 것입니다. 다른 점은 페이지에 탭과 콘텐츠를 표시하는 CSS뿐입니다. 탭용 JS는 일반적으로 콘텐츠를 표시 / 숨기기 /로드하지 않습니다.

또 다른 옵션은 Matteo Bicocchi의 jQuery mb.extruder 탭 플러그인입니다 : http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Listamatic을 살펴 보십시오 . 탭은 의미 상 특정 방식으로 스타일이 지정된 항목 목록입니다. Listamatic 쇼의 다양한 예제처럼 수직 탭이 작동하도록하기 위해 반드시 자바 스크립트가 필요하지는 않습니다.

여기에서 자신 만의 탭 / 아코디언 구조를 만들 수있는 매우 간단한 기능 : 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');