Javascript 如何优化Jquery代码？

我使用Jquery为页面动画创建了一些JavaScript：

我试图优化它，因为我对subtab1，subtab2，subtab3重复同样的事情

对所有的变量都执行相同的函数，唯一的变化是变量i的迭代

有什么建议吗

<script type="text/javascript">
  $(document).ready(function () {

    var $defensivo = $('#defensivoimg');
    var $equilibrado = $('#equilibradoimg');
    var $activo = $('#activoimg');

    var $defensivoSubTab = $('#subtab1');
    var $equilibradoSubTab = $('#subtab2');
    var $activoSubTab = $('#subtab3');

    var $fundosdiponiveis = $('#fundosdiponiveis');
    var $fundosdiponiveisTab = $('#tabs1');

    $defensivo.live('click', function () {
      $fundosdiponiveis.removeClass("subshow show").addClass("hide");
      $defensivoSubTab.removeClass("hide");
      $defensivoSubTab.show();
    });

    $equilibrado.live('click', function () {
      $fundosdiponiveis.removeClass("subshow show").addClass("hide");
      $equilibradoSubTab.removeClass("hide");
      $equilibradoSubTab.show();
    });

    $activo.live('click', function () {
      $fundosdiponiveis.removeClass("subshow show").addClass("hide");
      $activoSubTab.removeClass("hide");
      $activoSubTab.show();
    });
  });
</script>

这是我的默认div

var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');

当我单击以下选项卡之一时，将显示该对话框：

var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');

这个按钮隐藏了我的三个子选项卡的样式“display”，并在单击时将其更改为“none”

---

有什么建议吗？

对所有选项卡都有一个公共类属性，您只需编写$（'.class'）。单击（）并在此获取相应选项卡的id，并根据attr函数获取的id，您可以使用if-else在if-else中定义变量并执行代码块。

您可以编写一个返回正确函数的函数：

<script type="text/javascript">
  $(document).ready(function () {

    var $defensivo = $('#defensivoimg');
    var $equilibrado = $('#equilibradoimg');
    var $activo = $('#activoimg');

    var $defensivoSubTab = $('#subtab1');
    var $equilibradoSubTab = $('#subtab2');
    var $activoSubTab = $('#subtab3');

    var $fundosdiponiveis = $('#fundosdiponiveis');
    var $fundosdiponiveisTab = $('#tabs1');

    $defensivo.live('click', function () {
      $fundosdiponiveis.removeClass("subshow show").addClass("hide");
      $defensivoSubTab.removeClass("hide");
      $defensivoSubTab.show();
    });

    $equilibrado.live('click', function () {
      $fundosdiponiveis.removeClass("subshow show").addClass("hide");
      $equilibradoSubTab.removeClass("hide");
      $equilibradoSubTab.show();
    });

    $activo.live('click', function () {
      $fundosdiponiveis.removeClass("subshow show").addClass("hide");
      $activoSubTab.removeClass("hide");
      $activoSubTab.show();
    });
  });
</script>

function createShowTabFunc(tab) {
  return function () {
    $fundosdiponiveis.removeClass("subshow show").addClass("hide");
    tab.removeClass("hide");
    tab.show();
  }
}

然后分配单击处理程序：

$defensivo.live('click', createShowTabFunc($defensivoSubTab));
$equilibrado.live('click', createShowTabFunc($equilibradoSubTab));
$activo.live('click', createShowTabFunc($activoSubTab));

$defensivo.live('click', createShowTabFunc($defensivoSubTab));
$equilibrado.live('click', createShowTabFunc($equilibradoSubTab));
$activo.live('click', createShowTabFunc($activoSubTab));