我怎样才能让它变小？
<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;
});
答案 0 :(得分：0)
首先，您将为所有内容添加类。要向所有“菜单”提供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。它不适合你的缓和（我不能说我过去曾使用过任何缓和措施），但你可以查看它，希望你可以使用它。
答案 1 :(得分：0)
$(".tabMenu ul > li a").click(function(e){
$(".menu").removeClass('activeTab');
$("#"+e.target.id).addClass('activeTab');
$("#tab"+e.target.id.replace("menu","")).fadeIn({easing:'easeInOutSine'}, 900);
$(".tabs").hide();
});
为此，您必须为所有标签提供课程“标签”，并为所有菜单提供课程“菜单”