javascript - Bootstrap 按钮在单击时不会突出显示

Question

我有一个带有 3 个按钮的应用程序，这 3 个按钮进行 AJAX 调用以检索一些数据并使用这些数据重绘表格。但是，当单击该按钮时，该按钮应保持突出显示，以便用户知道他们正在查看哪些数据。

这是调用Web API方法的JS代码:

   iniciativasEstrategicas.GetVistaActividades = function (filtro) {
        var idObjetivoValue = sessionStorage.idObjetivoValue;
        $('#tab_vista1').html('<br><br><br><img class="loadImage" src="Images/loader.gif" />');
        $.ajax({
            url: 'IniciativasEstrategicasWebPart/GetVistaActividades',
            type: 'POST',
            data: {
                idObjetivo: idObjetivoValue,
                filtro: filtro
            },
            success: function (data) {
                drawVistaActividades(data);
            },
            error: function (data) {
                showErrorMessage(data);
            }
        });
    }   

这是绘制数据的方法:

 function drawVistaActividades(data) {
        resetBreadCrumb();
        var html = "";
        for (var i = 0; i < data.length; i++) {
            html += template.rowVistaActividades
                .replace("{0}", data[i].nombreActividad)
                .replace("{1}", data[i].iniciativaName)
                .replace("{2}", data[i].fechaVencimiento)
                .replace("{3}", data[i].fechaRealTerminacion)
                .replace("{4}", data[i].responsables);
        }
        $("#tab_vistaActividades").html("<br>" + "<br>" + template.tableVistaActividades.replace("{0}", html));
    }

这是我用来绘制数据的表格模板，还有按钮

tableVistaActividades: "<div>" +
                                    "<div>" + 
                                        "<div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">" +
                                          "<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('A tiempo')\">A tiempo</button>" +
                                          "<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('Atrasadas')\">Atrasadas</button>" +
                                          "<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('Pendientes')\">Pendientes</button>" +
                                        "</div>" +
                                    "</div>" + 
                                    "<table class='table'>" +
                                        "<thead>" +
                                            "<tr>" +
                                                "<th>" +
                                                    "Actividad" +
                                                "</th>" +
                                                "<th>" +
                                                    "Iniciativa" +
                                                "</th>" +
                                                "<th>" +
                                                    "Fecha propuesta" +
                                                "</th>" +
                                                "<th>" +
                                                    "Fecha real terminación" +
                                                "</th>" +
                                                "<th>" +
                                                    "Responsables" +
                                                "</th>" +
                                            "</tr>" +
                                        "</thead>" +
                                        "<tbody>" +
                                            "{0}" +
                                        "</tbody>" +
                                    "</table>" +"<div>",

和行模板

rowVistaActividades: "<tr>" +
                        "<td>" +
                            "{0}" +
                        "</td>" +
                        "<td>" +
                            "{1}" +
                        "</td>" +
                        "<td>" +
                            "{2}" +
                        "</td>" +
                        "<td>" +
                            "{3}" +
                        "</td>" +
                        "<td>" +
                            "{4}" +
                        "</td>" +
                    "</tr>",

正如您在 this page 中看到的那样.

我们使用相同的 Bootstrap 按钮代码，并且在该页面中按钮在单击时保持突出显示。

Answer 1

这应该可以解决您的问题，基本上您需要将“事件”添加到所选选项并从先前选择的 sibling 中删除“事件”。

$(".btn-group > .btn").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
    $(this).addClass("active");
});