Question

让我解释这个'新手'代码/脚本。我有14个TABS和14个容器。前三个选项卡（tab1，tab2和tab3）是主TABS。 Tab3包含11个标签。正如您在我的HTML代码（下面）中看到的，我有TABs div（标签标题）和TABs容器。当我点击特定的TAB时，它会向我显示触发到该TAB的特定内容。我在这里透露的代码工作正常，但我觉得有更舒适的方式来做到这一点。问题是：我如何才能优化这段代码？或者，对于我正在做的事情，是否有更舒适的解决方案？我们的想法是通过点击不是div class="contentcontainer"的内部元素的TAB来更改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

您可以使用starts with selector

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

即使对于身份统计为d_tab的所有div，它也会调用attach onclick。

而不是每次都重复这个

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

所有类似方法都可以改为单一方法

$('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');
});

其他方法可以做同样的事情。

PS：方法/功能可以减少冗余代码。您是一次又一次地重复相同的方法/功能。

Answer 2

$(".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。

更改TAB点击内容 - 关于我制作的代码

2 个答案: