Jquery 处理活动/非活动选项卡，除此之外还有更好的方法吗？

我有两个选项卡，下面是这两个选项卡的HTML代码：

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

代码是有效的，但我想知道是否有更好的方法/途径来实现这一点，是否有任何改进或其他相关措施来优化和最小化代码，例如：

<input type="button" data-route="route1" value="Activos" class="tab active">
<input type="button" data-route="route2" value="Inactivos" class="tab">

$( ".tab" ).click(function() {
    var this$ = $( this );
    if ( !this$.hasClass( 'active' ) ) {
        $( '.tab.active' ).removeClass( 'active' );
        this$.addClass( 'active' );
        $( "#layout-center" ).load( Routing.generate( this$.data( 'route' ) ) );
    }
 } );

$（“.tab”）。单击（函数（）{
var this$=$（this）；
如果（！this$.hasClass（'active'））{
$（'.tab.active'）.removeClass（'active'）；
此$.addClass（'active'）；
$（“#布局中心”）.load（Routing.generate（此$.data（'route'））；
}
} );

---

在2个选项卡的情况下，只能使用甚至

切换类（'active'）

。

稍微更改上面的代码

HTML

---

那么

load（）

方法呢？请注意，它在一个或其他选项卡上发生了更改，如何使用您的代码建议处理此部件

load（）

？你用它做什么？我把PHP在服务器端处理的两个不同的路由称为抱歉，没有看到。您可以将它们存储为选项卡属性。然后我如何访问它们？假设我调用这些属性

数据url

并将

非活动产品

或

产品列表

作为值传递，您应该尝试一下这个问题，因为它属于codereview.stackexchange.com，因为我不能使用

值

我使用数据路由并获得该属性您的代码完成了任务，非常感谢

<input type="button" data-route="route1" value="Activos" class="tab active">
<input type="button" data-route="route2" value="Inactivos" class="tab">

$( ".tab" ).click(function() {
    var this$ = $( this );
    if ( !this$.hasClass( 'active' ) ) {
        $( '.tab.active' ).removeClass( 'active' );
        this$.addClass( 'active' );
        $( "#layout-center" ).load( Routing.generate( this$.data( 'route' ) ) );
    }
 } );

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

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