Flexdashboard：为###标题设置锚点（level3）

Question

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

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

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

我的问题是，是否可以为标签创建锚点（所以标题级别 3）？

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

Page 4
=====================================

## Row {.tabset}

### tab 1 {#test1}

### tab 2 {#test2}

自动为“第 4 页”创建锚点，即 #page-4。对于“tab 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 来读取 URL 参数。这允许我们定义像a(href="?page5&tab=4") 这样的链接。 javascript 将获取参数，在我们的例子中page 为5 和tab 为4，然后执行两次单击，一次到达#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"
             ))
```

旧答案

在我的情况下，您的标题级别 3 锚点（{#test1} 等）即使在不使用 runtime: shiny 时也能正常工作。您可以通过操作按钮更改tabs，但前提是您在同一页面上。例如，您可以在page 4 上从tab1 到tab2，但不能从page 4 上的tab1 到page 5 上的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"
             ))

```