r - Flexdashboard:为### 标题设置 anchor (级别 3)

Question

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

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

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

我的问题是，可以为选项卡创建 anchor (所以标题级别 3)吗？

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

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

## Row {.tabset}

### tab 1 {#test1}

### tab 2 {#test2}

anchor 是为“第 4 页”自动创建的，即 #page-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 将获取参数，在我们的例子中 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"
             ))
```

旧答案

在我的例子中，即使不使用 runtime: shiny，您的 header 3 级 anchor ({#test1} 等)也能正常工作。您可以通过操作按钮更改选项卡，但前提是您在同一页面上。例如，您可以在 page 4 上从 tab1 转到 tab2，但不能在 page 从 tab1 转到4 到 第 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"
             ))

```