JS minimization for tabs
How can I make it smaller?
<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;
});
+3
2 answers
First, you add classes to everything. For all "menus" give class="menu", and for all tabs "t" specify class="tab". Make tag identifiers a anumber only. So just “One” or “Two”, pull out the “menu” part of the identifier (but leave the tabs the same). Finally, use this function (replace the switch):
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
}
edit Here is jsFiddle . It did not work with your easing (I cannot say that I used any easing in the past), but you can check it and, hopefully, you can use it.
0