jquery - Change content on TAB click - About the code i made -
let me explain 'newbie' code/script. i've got 14 tabs , 14 containers. first 3 tabs (tab1,tab2 , tab3) main tabs. tab3 contains 11 more tabs. can see in html code (below), i've got tabs div (tabs header) , tabs container. when click on specific tab shows me specific content triggered tab. code reveal here working fine, feel there more comfortable way that. question is: how can optimaze code? or there more comfortable solution i'm doing? idea change div class="contentcontainer" content clicking on tabs not inner element of div class="contentcontainer
<script> jquery(document).ready(function ($) { $('#d_tab1').css('border-bottom', '0'); $('#descriptionpagetabs div').click(function () { $(this).removeclass('notactivetab').siblings().addclass('notactivetab'); }); $('#d_tab1').click(function () { $(this).css('border-bottom', '0').siblings().removeattr('style'); $('#cont1').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab2').click(function () { $(this).css('border-bottom', '0').siblings().removeattr('style'); $('#cont2').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab3').click(function () { $(this).css('border-bottom', '0').siblings().removeattr('style'); $('#cont3').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('div.arrowc').click(function () { $(this).toggleclass('arrowo').toggleclass('arrowc'); $('#subtabs').slidetoggle('normal'); }); $('#d_tab4').click(function () { $('#cont4').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab5').click(function () { $('#cont5').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab6').click(function () { $('#cont6').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab7').click(function () { $('#cont7').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab8').click(function () { $('#cont8').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab9').click(function () { $('#cont9').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab0').click(function () { $('#cont10').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab11').click(function () { $('#cont11').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab12').click(function () { $('#cont12').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('#d_tab13').click(function () { $('#cont13').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('a#imged').click(function () { $('#cont11').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('a#pixel').click(function () { $('#cont12').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('a#scrn').click(function () { $('#cont13').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('a#num4').click(function () { $('#cont4').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('a#num5').click(function () { $('#cont5').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('a#num6').click(function () { $('#cont6').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('a#num7').click(function () { $('#cont7').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('a#num8').click(function () { $('#cont8').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('a#num9').click(function () { $('#cont9').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); $('a#num10').click(function () { $('#cont10').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); }); html
<div id="descriptionpagetabs"> <div class="d_tabs" id="d_tab1">tab1</div> <div class="d_tabs notactivetab" id="d_tab2">tab2</div> <div class="d_tabs notactivetab" id="d_tab3">tab3:<div class="arrowc" id="arrow"></div> </div> </div> <div id="subtabs"> <div class="d_stabs" id="d_tab4">tab4</div> ... <div class="d_stabs" id="d_tab13">tab13(lasttab)</div> </div> <div id="descriptionpagecontainer"> <div id="cont1">content 1</div> ... <div class="deactivated" id="cont13">content 13</div> </div>
you can use starts selector
$('div[id^="d_tab"]').click(function () { //... }); it call attach onclick divs id stats d_tab.
also instead of repeating every time
$('#d_tab0').click(function () { $('#cont10').removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); all similar method can changed 1 single method
$('div[id^="d_tab"]').click(function () { var number = this.id.replace(/[^0-9]/g, ''); var divid = "cont" + number; $("#" + divid).removeclass('deactivated').addclass('activated').siblings().removeclass('activated').addclass('deactivated'); }); same thing can done other methods.
ps: methods/functions there reduce redundant code. repeating same methods/functions again , again.
Comments
Post a Comment