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

如何编辑引导选项卡文本而不将其设置为当前和正常工作?

twitter-bootstrap-3 jquery

Chris · 技术社区 · 7 年前

我有动态创建的选项卡,需要能够编辑这些选项卡中的任何文本,我可以这样做。但是,我遇到了一些需要添加的更改,可以通过ctrl+click编辑选项卡的文本(这是我做的),但是没有将选项卡设置为当前选项卡。例如,我有5个选项卡,第一个选项卡是活动的,我希望在不中断当前活动选项卡的情况下编辑选项卡3,方法是按住Ctrl键并单击,完成编辑后,第一个选项卡仍处于活动状态。

我有两个不同的事件发生,一个是选项卡的实际单击事件

$('body').on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    if ($('#TabEditorWrapper').hasClass("show-tab-editor")) {
        $('#TabEditorWrapper').removeClass("show-tab-editor");
        $('#SiteOverlay').css('display', 'none');
    }

    ...

    $("#List li").addClass('not-active');
});

这是我在按住Ctrl键的同时单击其他选项卡时用来进行编辑的代码(是的,我知道我已将此设置为单击事件)

$(document).on('click', '#List > .nav-item', function (e) {

    if (e.ctrlKey) {
        $(this).find('input').toggle()
            .val($(this)
            .find('a').html()).focus();

        $(this).find('a').toggle();

        oldAreaName = $(this).find("a").text();

        currentAreaID = parseInt($(this).find("a").data('areaid'));
    }
});

1 回复 | 直到 7 年前

Cesar Bielich 7 年前

在不知道你的HTML的情况下,我猜是在你的点击事件之前,先找到当前活动的标签。如果该选项卡不是当前选项卡,请从正在编辑的选项卡中删除“活动”类,并将其重置为原始类。

问题是一旦你点击标签 click 事件将激发获取上一个活动选项卡的时间已晚,因为它已被单击,因此必须先获取当前活动选项卡,然后才能继续。您可以这样做:在页面加载时创建一个获取当前活动选项卡的事件。

$(document).ready( function() {
    $('.nav-link').each( function() {
        if ($(this).hasClass("active")) {
            var og_active_tab_location = $(this);
        }
    })        
})

现在,您可以告诉您的单击事件以删除类 active 首先,将og_选项卡标记为 积极的 . 在添加类之前先删除它是很重要的,因为如果正在编辑的选项卡与原始选项卡相同,那么活动类将被删除。

供参考 .nav-link 位于 .nav-item 在哪里 积极的 应用了类,因此您正在处理 children()

$(document).on('click', '#List > .nav-item', function (e) {

    $(this).children('.nav-link').removeClass('active');
    og_active_tab_location.addClass('active');

    if (e.ctrlKey) {
        $(this).find('input').toggle()
            .val($(this)
            .find('a').html()).focus();

        $(this).find('a').toggle();

        oldAreaName = $(this).find("a").text();

        currentAreaID = parseInt($(this).find("a").data('areaid'));
    }

});