Change content on TAB click - About the code i made

Question

Let me explain this 'newbie' code/script. I've got 14 TABS and 14 Containers. First Three tabs (tab1,tab2 and tab3) are Main TABS. Tab3 contains 11 more tabs. As you can see in my HTML code (below), i've got TABs div (tabs header) and TABs Container. When i click on a specific TAB it shows me the Specific content triggered to that TAB. The code i reveal here is working fine, but i feel that there is more comfortable way to do that. The question is: How i can optimaze this code? Or is there a more comfortable solution for what i'm doing? The idea is to change div class="contentcontainer" content by clicking on TABs which is 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>

Answer 1

$(".d_tabs").on("click", function (d) {
    $('.d_tabs').addClass("notactivetab")
    $($(d.currentTarget)[0]).removeClass("notactivetab");
    $('#descriptionpagecontainer div').addClass("deactivated");
    $("#descriptionpagecontainer #cont" + parseInt($($(d.currentTarget)[0]).attr("id")).toString()).removeClass("deactivated");
});

This should do the trick. But, I would seriously suggest instead to have 'deactivated' as the default state for each tab & container div. And, apply class 'active' and 'activeTab' only to the currently selected tab and its corresponding div respectively.

Answer 2

You can use starts with selector

$('div[id^="d_tab"]').click(function () {
 //...
});

It will call attach onclick even for all divs whose id stats with d_tab.

Also instead of repeating this every time

$('#d_tab0').click(function () {
    $('#cont10').removeClass('deactivated').addClass('activated').siblings().removeClass('activated').addClass('deactivated');
});

all similar method can be changed to one 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 be done with other methods.

PS: Methods/functions are there to reduce the redundant code. You are repeating the same methods/functions again and again.