0

この「初心者」コード/スクリプトについて説明しましょう。14 個のタブと 14 個のコンテナーがあります。最初の 3 つのタブ (tab1、tab2、および tab3) はメインのタブです。Tab3 には、さらに 11 個のタブが含まれています。私の HTML コード (以下) でわかるように、TAB div (タブ ヘッダー) と TAB コンテナーがあります。特定のタブをクリックすると、そのタブにトリガーされた特定のコンテンツが表示されます。ここで公開したコードは正常に動作していますが、もっと快適な方法があると思います。問題は、このコードを最適化するにはどうすればよいですか? または、私がやっていることに対するより快適な解決策はありますか? アイデアは、div class="contentcontainer"の内部要素ではないタブをクリックしてコンテンツを変更することです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>
4

2 に答える 2

0 
$(".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");
});

これでうまくいくはずです。しかし、代わりに、各タブとコンテナー div のデフォルト状態を「非アクティブ化」にすることを真剣に提案します。そして、クラス 'active' と 'activeTab' をそれぞれ現在選択されているタブとそれに対応する div にのみ適用します。

于 2013-10-07T13:07:35.747 に答える