如何使用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; 
    } 
});