引用 rmarkdown/js 中的嵌套选项卡？

Question

我对 JavaScript 或 CSS 不太熟悉，但我在 RMarkdown 中使用了它的一些片段。我正在处理一个包含 tiles/buttons 页面的文档，该页面用作导航按钮以转到我的 RMarkdown 中的其他选项卡（将此代码归功于 Allen O'Brien！）。这些都很好，但我想知道如何创建一个导航到特定 sub-tab 的磁贴。例如，我有这三个按钮：

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


});

这些选项卡中的每一个在该页面上都有我创建的其他选项卡，就像这样的新选项卡集：

## Individuals {- .tabset}

### #4 {- .tabset}

我想要做的是有一个按钮，让我们说个人 #4，而不是必须单击个人按钮，然后单击该页面上的个人 #4 子选项卡。有什么建议吗？

这是一个更清晰的更新 - 这就是我当前的降价文档的设置方式。亮点是包含所有按钮的页面。现在所有按钮都引用 headers 和两个 ##（如 Individual Whales），但我正在尝试构建也可以引用 ### headers 的按钮（如 Blue Whale 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}

Answer 1

哇！这看起来并没有那么难，但是哇！我发现了很多破坏标签集的方法！

无论您嵌套选项卡集的数量或深度如何，这里都有一个方法。

我最终使用 JS 而不是 JQuery。我在巢中巢中使用了巢中巢，所以我可以确保它仍然可以工作。如果这超过了顶部，请告诉我，我会制作一个更简单的版本。

右图显示第 3 个 level-1 tabset 的第一个 level-2 tabset 是 'Individuals' > 4 所在的位置。

您可以在标题下方看到您的按钮 'Analysis.' 该按钮可以移动到任何地方（我想测试一下）并且它仍然有效。

样式仅适用于按钮。

---
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>

嵌套标签集

# 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)
```

最后但同样重要的是，使按钮执行此操作的 JS

```{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

```

引用 rmarkdown/js 中的嵌套选项卡？

referencing a nested tab in rmarkdown/js?

javascript

html

jquery

tabs

r-markdown