r语言 - Flexdashboard:为 ### 标题(级别 3)设置锚点

Question

在flexdashbard中，我们可以创建不同的标题：

• 标题级别 1：它们是页面
• 标题级别 2：我们指定Row或Column
• 标题级别 3：选项卡

现在对于锚点，我们似乎只能将它们设置为标题级别 1。正如我们在本文中看到的。

我的问题是，是否可以为选项卡创建锚点(因此标题级别 3)？

我试图找到解决方案。例如，使用以下代码：

Page 4
=====================================
## Row {.tabset}
### tab 1 {#test1}
### tab 2 {#test2}

为#page-4的"第 4 页"自动创建锚点。对于"选项卡 1"，我尝试添加{#test1}，但它不起作用。

编辑：使用javascript的解决方案

另一个对我有用的解决方案是使用 javascript，进入下一个选项卡。

首先我们可以添加一个JavaScript

<script type="text/javascript">
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>

然后，我们可以创建按钮来导航

<a class="btn btn-primary btnNext">Next</a>
<a class="btn btn-primary btnPrevious">Previous</a>

但我在R Markdown中测试过，它不起作用。

Answer 1

更新

我现在想出了一种通过单击链接从#page-4#test1到#page-5#test4的方法。我使用一些javascript来读取URLs参数。这使我们能够定义链接，例如a(href="?page5&tab=4").javascript 将获取参数，在我们的例子中page5，tab4然后执行两次单击，一次到达#page-5，另一次获取名为#test4的选项卡 4。可能有更好的选项允许您设置活动页面选项卡和选项卡集选项卡，但我没有让它们与 {flexdashboard} 一起使用。无论如何，我希望下面的方法可以解决您的问题。

---
title: "Untitled"
output: 
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
library(htmltools)
```
```{js}
document.addEventListener("DOMContentLoaded", function(){
var url_string = window.location.href;
var url = new URL(url_string);
var page = url.searchParams.get('page');
var pageid = '#page-'.concat(url.searchParams.get('page'));
var tab = 'tab'.concat(url.searchParams.get('tab'));
var tabid = '#test'.concat(url.searchParams.get('tab'));
$('a[href="'+ pageid +'"]').click();
$('a[href="'+ tabid +'"]').click();
});
```

Page 4
=====================================
## Row {.tabset}
### tab 1 {#test1}
```{r}
tags$a(href = "?page=5&tab=4",
shiny::actionButton("btn1",
"go to page-5 tab4"
))
```

### tab 2 {#test2}
```{r}
tags$a(href = "#test1",
shiny::actionButton("btn4",
"go to tab1"
))
```

Page 5
=====================================
## Row {.tabset}
### tab 3 {#test3}
```{r}
tags$a(href = "#test4",
shiny::actionButton("btn5",
"go to tab4"
))
```
### tab 4 {#test4}
```{r}
tags$a(href = "?page=4&tab=2",
shiny::actionButton("btn6",
"go to page-4 tab2"
))
```

旧答案

就我而言，即使不使用runtime: shiny，您的标头级别 3 锚点({#test1}等)也可以工作。 您可以通过操作按钮更改tabs，但前提是您在同一页面上。例如，您可以在page 4上从tab1到tab2，但不能在page 5上从tab1page 4转到tab4。但是从page 4改为page 5又是可能的。

---
title: "Untitled"
output: 
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(htmltools)
```

Page 4
=====================================
## Row {.tabset}
### tab 1 {#test1}
```{r}
tags$a(href = "#test2",
shiny::actionButton("btn1",
"go to tab2"
))
tags$a(href = "#test1",
shiny::actionButton("btn2",
"go to tab3 (not working)"
))
tags$a(href = "#page-5",
shiny::actionButton("btn3",
"go to page5 (working)"
))
```

### tab 2 {#test2}
```{r}
tags$a(href = "#test1",
shiny::actionButton("btn4",
"go to tab1"
))
```

Page 5
=====================================
## Row {.tabset}
### tab 3 {#test3}
```{r}
tags$a(href = "#test4",
shiny::actionButton("btn5",
"go to tab4"
))
```
### tab 4 {#test4}
```{r}
tags$a(href = "#test3",
shiny::actionButton("btn6",
"go to tab3"
))
```