0
430
Visualizaçõeshaciendo referencia a una pestaña anidada en rmarkdown/js?
No estoy muy familiarizado con JavaScript o CSS, pero uso fragmentos en RMarkdown. Estoy trabajando en un documento que tiene una página con mosaicos/botones que se usan como botones de navegación para llegar a otras pestañas en mi RMarkdown (¡acreditando a Allen O'Brien por este código!). Todo esto funciona muy bien, pero me pregunto cómo crear un mosaico que navegue a una subpestaña específica. Entonces, por ejemplo, tengo estos tres botones:
{js, echo = FALSE} // Set destination for clicks on the id tabs after page is ready $(document).ready ( function () { // When tile 1 (#tile1) is clicked, navigate to the report-details tab. $( "#tile1" ).on( "click", function() { $('.nav-pills li a[href="#individuals"]').tab('show'); }); // When tile 2 (#tile2) is clicked, navigate to the report-details tab. $( "#tile2" ).on( "click", function() { $('.nav-pills li a[href="#hormone-plots"]').tab('show'); }); // When tile 3 (#tile3) is clicked, navigate to the report-details tab. $( "#tile3" ).on( "click", function() { $('.nav-pills li a[href="#species-comparison"]').tab('show'); }); });Cada una de estas pestañas tiene pestañas adicionales en esa página que he creado como un nuevo conjunto de pestañas como este:
## Individuals {- .tabset} ### #4 {- .tabset}Y lo que me gustaría hacer es tener un botón que haga referencia, digamos, al Individuo n.° 4, en lugar de tener que hacer clic en el botón Individuos y luego hacer clic en la subpestaña Individuo n.° 4 en esa página. ¿Alguna sugerencia?
Aquí hay una actualización más clara: así es como está configurado mi documento de rebajas actual. Lo más destacado es la página con todos los botones. En este momento, todos los botones hacen referencia a encabezados con dos ## (como Ballenas individuales), pero estoy tratando de crear botones que también puedan hacer referencia a los encabezados ### (como Ballena azul 617698)
# {- .tabset .tabset-fade .tabset-pills} ## Highlights {-} <div> <div class="info-tile" id="tile1" style = "background: salmon;"> <span class = "info-tile-large-text">Individual Profiles</span> <br /> </div> </div> ## Individual Whales {- .tabset} ### Blue Whale 617698 {- .tabset}1 Respostas
Responde à pergunta0
¡Uf! Esto no parecía que fuera a ser tan difícil, pero ¡guau! ¡Encontré muchos métodos que rompieron el conjunto de pestañas!
Aquí hay un método que funciona independientemente de cuántos o qué tan profundamente anide sus conjuntos de pestañas.
Terminé usando JS en lugar de JQuery. Usé un nido dentro de un nido dentro de un nido, para poder asegurarme de que todavía iba a funcionar. Si esto es exagerado, házmelo saber y haré una versión más simple.
La imagen de la derecha muestra que el primer conjunto de pestañas de nivel 2 del tercer conjunto de pestañas de nivel 1 es donde está 'Individuos' > 4.
Puede ver su botón debajo del encabezado "Análisis". El botón se puede mover a cualquier lugar (que se me ocurra probar) y seguirá funcionando.
El estilo es solo para el botón.
--- title: "Untitled" author: "me" date: "4/9/2022" output: html_document --- ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = FALSE) ``` <style> .info-tile { vertical-align: middle; -moz-box-shadow: 0px 10px 14px -7px #000000; -webkit-box-shadow: 0px 10px 14px -7px #000000; box-shadow: 0px 10px 14px -7px #000000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid salmon; display: inline-block; font-size: 20px; padding: 6px 50px; text-decoration: none; /*no underline!!*/ cursor: pointer; } .info-tile:active { /*simulate movement*/ position: relative; top: 1px; } </style>Los conjuntos de pestañas anidadas
# Analysis {.tabset .tabset-fade .tabset-pills} <a class="info-tile" id="tile1" style="background: salmon; color:black; font-face: bold;">Individual Profiles</a> ## 1 ### 1 A {.tabset .tabset-fade .tabset-pills} #### 1.1 ```{r p11, echo=FALSE} plot(x = 1, y = 2) ``` #### 1.2 ```{r p12, echo=FALSE} plot(x = 1, y = 2) ``` ## 2 ### 2 A {.tabset .tabset-fade .tabset-pills} #### 2.1 ```{r p21, echo=FALSE} plot(x = 1, y = 2) ``` #### 2.2 ```{r p22, echo=FALSE} plot(x = 1, y = 2) ``` ## 3 ### Individuals {.tabset .tabset-fade .tabset-pills} #### 4 <!--- BUTTON TARGET IS HERE!!!----> ```{r p1, echo=FALSE} plot(x = 1, y = 2) ``` #### 3.2 ```{r p2, echo=FALSE} plot(x = 4, y = 10) ``` ---- ### 3 B {.tabset .tabset-fade .tabset-pills} #### 3.3 ```{r p3, echo=FALSE} plot(x = 1, y = 10) ``` #### 3.4 ```{r p4, echo=FALSE} plot(x = 1:100, y = 100:1) ```Por último, pero no menos importante, el JS para hacer que el botón haga su trabajo
```{r mine,results="asis",engine="js"} // send me where I realllllly want to go setTimeout(function(){ document.querySelector('a#tile1').addEventListener('click', doIt); function doIt(){ document.querySelector('a[href*="#section-6"]').click(); //section 3 document.querySelector('a[href*="#section-7"]').click(); // Indiv 4 } }, 100); // a tiny delay... just in case I'm running behind ```