时间戳

首页 > 解决方案 > 如何在不将其设置为当前且正常运行的情况下编辑引导选项卡文本？

jquery - 如何在不将其设置为当前且正常运行的情况下编辑引导选项卡文本？

问题描述

我有动态创建的选项卡，并且需要能够编辑任何这些选项卡文本，我可以这样做。但是，我遇到了一些要添加的更改，即能够通过 ctrl+click（我已经完成）编辑选项卡的文本，但是没有将选项卡设置为当前选项卡。例如，我有 5 个选项卡，第一个选项卡处于活动状态，我想在不中断当前活动选项卡的情况下通过 ctrl+click 编辑选项卡 3，完成编辑后第一个选项卡仍处于活动状态。

我有两个不同的事件发生，一个是标签的实际点击事件

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

标签： jquerytwitter-bootstrap-3

解决方案

在不知道您的 html 的情况下，我的猜测是，如果在您的点击事件之前首先找到当前处于活动状态的选项卡。如果该选项卡不是当前选项卡，请从您正在编辑的选项卡中删除“活动”类并将其重置为原始选项卡。

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

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

现在您可以告诉您的点击事件先删除该类，active然后将 og_tab 标记为active. 在添加之前先删除类很重要，因为如果您正在编辑的选项卡与原始选项卡相同，那么活动类将被删除。

FYI.nav-link位于内部.nav-item并且是active应用类的位置，因此您正在处理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'));
    }

});

推荐阅读