0

私は 2 つのタブを持っています。以下は両方の HTML コードです。

<input type="button" value="Activos" id="tab-active" class="active">
<input type="button" value="Inactivos" id="tab-inactive">

そして、タブ間で変更するために次のコードを作成します。

$("#tab-inactive").click(function() {
    var current = $(this);

    $("#tab-active").removeClass("active");
    current.addClass("active");

    $("#layout-center").load(Routing.generate('inactive_product'));
});

$("#tab-active").click(function() {
    var current = $(this);

    $("#tab-inactive").removeClass("active");
    current.addClass("active");

    $("#layout-center").load(Routing.generate('product_list'));
});

コードは機能しますが、これを行うためのより良い方法/パスが存在するかどうか、コードを最適化および最小化するためにこれに関する改善または何かがあるかどうかを知りたいです

4

2 に答える 2

1

上記のコードを少し変更します。

HTML

<button type="button" value="inactive_product" class="tab active">Activos</button>
<button type="button" value="product_list" class="tab">Inactivos</button>

Jクエリ

$('.tab').click(function() 
{
    var $this         = $(this);
    var $tabs         = $('.tab');
    var route         = $this.val();
    var $layoutCenter = $("#layout-center");        

    $tabs.removeClass('active');
    $this.addClass('active');

    $layoutCenter.load(Routing.generate(route));  
});
于 2013-09-02T19:50:17.897 に答える