jquery - 最小化选项卡的 JS

Question

我怎样才能让它变小？

<div id="tabsWrapper">
              <div class="tabMenu">
                <ul>
                  <li><a href="#" class="menu" id="One" class="activeTab">{tab-01-title}</a></li>
                  <li><a href="#" class="menu" id="Two">{tab-02-title}</a></li>
                  <li><a href="#" class="menu" id="Three">{tab-03-title}</a></li>
                  <li><a href="#" class="menu" id="Four">{tab-04-title}</a></li>
                  <li><a href="#" class="menu" id="Five">{tab-05-title}</a></li>
                  <li><a href="#" class="menu" id="Six">{tab-06-title}</a></li>
                  <li><a href="#" class="menu" id="Seven">{tab-07-title}</a></li>
                  <li><a href="#" class="menu" id="Eight">{tab-08-title}</a></li>
                  <li><a href="#" class="menu" id="Nine">{tab-09-title}</a></li>
                  <li><a href="#" class="menu" id="Ten">{tab-10-title}</a></li>
                  <li><a href="#" class="menu" id="Eleven">{tab-11-title}</a></li>
                  <li><a href="#" class="menu" id="Twelve">{tab-12-title}</a></li>
                </ul>
              </div>
              <div id="tabbedContent">
                <ul>
                  <section id="tabOne" class="contentTab">
                    <h3>{tab-01-title}</h3>
                    {tab-01-content} </section>
                  <section id="tabTwo" class="contentTab">
                    <h3>{tab-02-title}</h3>
                    {tab-02-content} </section>
                  <section id="tabThree" class="contentTab">
                    <h3>{tab-03-title}</h3>
                    {tab-03-content} </section>
                  <section id="tabFour" class="contentTab">
                    <h3>{tab-04-title}</h3>
                    {tab-04-content} </section>
                  <section id="tabFive" class="contentTab">
                    <h3>{tab-05-title}</h3>
                    {tab-05-content} </section>
                  <section id="tabSix" class="contentTab">
                    <h3>{tab-06-title}</h3>
                    {tab-06-content} </section>
                  <section id="tabSeven" class="contentTab">
                    <h3>{tab-07-title}</h3>
                    {tab-07-content} </section>
                  <section id="tabEight" class="contentTab">
                    <h3>{tab-08-title}</h3>
                    {tab-08-content} </section>
                  <section id="tabNine" class="contentTab">
                    <h3>{tab-09-title}</h3>
                    {tab-09-content} </section>
                  <section id="tabTen" class="contentTab">
                    <h3>{tab-10-title}</h3>
                    {tab-10-content} </section>
                  <section id="tabEleven" class="contentTab">
                    <h3>{tab-11-title}</h3>
                    {tab-12-content} </section>
                  <section id="tabTwelve" class="contentTab">
                    <h3>{tab-12-title}</h3>
                    {tab-12-content} </section>
                </ul>
              </div>




 $(".tabMenu ul > li a").click(function(e){  
            switch(e.target.id){  
            case "menuOne":  
                $("#menuOne").addClass("activeTab");  
                $("#menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                $("#tabOne").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
            break;  
            case "menuTwo":  
                $("#menuOne, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                $("#menuTwo").addClass("activeTab");  
                $("#tabTwo").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
            break;  
            case "menuThree":  
                $("#menuOne, #menuTwo, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                $("#menuThree").addClass("activeTab");  
                $("#tabThree").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabTwo, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
            break;
            case "menuFour":  
                $("#menuOne, #menuTwo, #menuThree, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                $("#menuFour").addClass("activeTab");  
                $("#tabFour").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabTwo, #tabThree, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
            break;
            case "menuFive":  
                $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                $("#menuFive").addClass("activeTab");  
                $("#tabFive").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
            break;
            case "menuSix":  
                $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                $("#menuSix").addClass("activeTab");  
                $("#tabSix").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
            break;
            case "menuSeven":  
                $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                $("#menuSeven").addClass("activeTab");  
                $("#tabSeven").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
            break;
            case "menuEight":  
                $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                $("#menuEight").addClass("activeTab");  
                $("#tabEight").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
            break;
            case "menuNine":  
                $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                $("#menuNine").addClass("activeTab");  
                $("#tabNine").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
            break;
            case "menuTen":  
                $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuEleven, #menuTwelve").removeClass("activeTab");  
                $("#menuTen").addClass("activeTab");  
                $("#tabTen").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabEleven, #tabTwelve").css("display", "none");  
            break;
            case "menuEleven":  
                $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuTwelve").removeClass("activeTab");  
                $("#menuEleven").addClass("activeTab");  
                $("#tabEleven").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabTwelve").css("display", "none");  
            break;
            case "menuTwelve":  
                $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven").removeClass("activeTab");  
                $("#menuTwelve").addClass("activeTab");  
                $("#tabTwelve").fadeIn({easing:'easeInOutSine'}, 900);
                $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven").css("display", "none");  
            break;
            }  
            //alert(e.target.id);  
            return false;
        });  

Answer 1

首先，您将为所有内容添加类。对于所有“菜单”，给出 class="menu"；对于所有“选项卡”，给出 class="tab"。将 a 标签的 id 设置为数字。因此，只需“一”或“二”，取出 id 的“菜单”部分(但保留选项卡相同)。最后使用这个函数(替换开关):

var id = e.target.id;
if ( !$( "#" + id ).hasClass( "activeTab" ) ) { // don't run if active link is being clicked
    $( "a.menu" ).removeClass( "activeTab" ); // remove active from all menus
    $( "#" + id ).addClass( "activeTab" ); // make clicked menu link active
    $( ".tab" ).css( "display" , "none" ); // hide all tabs (I assume div, but not sure so I didn't include the tag name in selector)
    $( "#tab" + id ).fadeIn( { easing : 'easeInOutSine' } , 900 ); // ease in selected tab
}

编辑这是一个jsFiddle 。它不适用于您的缓动(我不能说我过去使用过任何缓动)，但您可以检查一下，希望您可以使用它。