代码之家 › 专栏 › 技术社区 › Reynier

处理活动/非活动选项卡,还有其他更好的方法吗?

html jquery

Reynier · 技术社区 · 11 年前

我有两个选项卡,下面是这两个选项卡的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'));
});

代码是有效的,但我想知道是否有更好的方法/路径可以做到这一点,是否有任何改进或围绕这一点的东西,以便优化和最小化代码

2 回复 | 直到 11 年前

Tomas Santos 11 年前

稍微更改上面的代码。

HTML格式

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

u_mulder 11 年前

例如:

<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' ) 可以使用。

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前