jquery - 如何使用 jQuery Accordian 动态移动制表符位置？

Question

在 Accordion jQuery 功能中，如何在不使用 UI 插件的情况下使用左、右、上和下动态移动选项卡位置？

示例：有一个包含四个值的下拉列表，它们是 1.top 2.bottom 3.left 和 4.right

If i click on top -    Tabs should display top to bottom direction
If i click on bottom - Tabs should display bottom to top direction
If i click on left -   Tabs should display left to right direction
If i click on left -   Tabs should display right to left direction

Answer 1

你可以试试下面的代码。请注意，此代码不完整。您需要添加所有案例...

$("select").change(function() {
    var str = "";
    $("select option:selected").each(function() {
        str += $(this).text() + " ";
    });

    switch (str) {
    case 'top':
        $("#tabs").addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
        break;

    case 'bottom':
        // fix the classes
        $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
            .removeClass( "ui-corner-all ui-corner-top" )
            .addClass( "ui-corner-bottom" );

        // move the nav to the bottom
        $( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );
        break;

    case 'left':
        // change the required classes
        break;

    case 'right':
        // change the required classes
        break;
    }
});