Question

我有两个标签，下面是两个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'));
});

代码有效但我想知道是否存在更好的方法/路径来执行此操作，任何改进或其他方面的内容以优化和最小化代码

Answer 1

略微更改上面的代码。

HTML

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

JQUERY

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

Answer 2

例如：

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

如果只有 2个标签，则可以使用toggleClass( 'active' )。

处理活动/非活动标签，除此之外的更好方法？

2 个答案: