Question

我想知道如果我的代码可以做些什么来缩短它。这是我的代码，它就像一个简单的标签。顺便说一句，这些代码已经可以使用，但我想如果我有很多标签，那么我必须重复许多点击功能。有没有办法缩短我的脚本，提前谢谢。

$(function () {
    $(".invMer, .invEq").hide();

    $(".mergers a").click(function () {
        $(".invMer").fadeIn();
        $(".invEq, .invPe").hide();
    });

    $(".equity a").click(function () {
        $(".invEq").fadeIn();
        $(".invMer, .invPe").hide();
    });

    $(".privateEq a").click(function () {
        $(".invPe").fadeIn();
        $(".invMer, .invEq").hide();
    });

Answer 1

为所有链接指定相同的类，并提供一个数据属性，说明应该打开哪个选项卡。如下所示：

<div class="mergers">
    <a class="tablink" href="#" data-tab="invMer">Mergers</a>
</div>

所有标签DIV也应该有一个共同的类：

<div class="tabdiv" id="invMer">
    ...
</div>

然后你可以使用一个处理程序：

$(".tablink").click(function() {
    var tab = '#' + $(this).data("tab");
    $(".tabdiv").not(tab).hide();
    $(tab).show();
});

Answer 2

使用数据属性

<a data-show=".invPe">

并做

$("a[data-show]").on("click", function () {
    var selector = $(this).data("show"); 
    $(".invMer, .invEq, .invPe").hide();
    $(selector).fadeIn();
});

Javascript / Jquery onclick函数凝结

2 个答案: