Estoy haciendo un tablero flexible y me gustaría tener conjuntos de pestañas paralelos, de modo que cuando se haga clic en una pestaña en una fila, la pestaña n también se abra en la fila de la sección. He intentado trabajar a partir de un ejemplo SO muy similar ( Cambiar el segundo conjunto de pestañas al hacer clic en flexdashboard ), pero cuando tejo, el javascript no tiene ningún efecto: el comportamiento no cambia.

Aquí está la respuesta específica que estoy tratando de implementar:

 --- title: "Untitled" output: flexdashboard::flex_dashboard: orientation: columns vertical_layout: fill --- ```{r setup, include=FALSE} library(flexdashboard) ``` ```{js} document.addEventListener("DOMContentLoaded", function(){ $('a[data-toggle="tab"]').on('click', function(e){ // find the tab index that is click child = e.target.parentNode; tabnum = Array.from(child.parentNode.children).indexOf(child); // find in which column we are column = $(e.target).closest("div[id]"); // show the same tab in the other column columnid = column.attr("id"); if (columnid == "column") { columnto = "column-1"; } else { columnto = "column"; } $("div[id="+columnto+"] li:eq("+tabnum+") a").tab('show'); }) }); ``` Column {.tabset} ----------------------------------------------------------------------- ### Chart A1 This is a text ### Chart B1 ```{r} plot(iris) ``` Column {.tabset} ----------------------------------------------------------------------- ### Chart A2 ```{r} plot(mtcars) ``` ### Chart B2 This is another text ```