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

更新

我现在想出了一个方法，通过单击 link 从 #page-4 #test1 到 #page-5 #test4。我使用一点 javascript 来读取 URL 参数。这允许我们像 a(href="?page5&tab=4") 一样定义 link。 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"
             ))
```

旧答案

在我的例子中，你的 header 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"
             ))

```

Flexdashboard：为### 标题设置锚点（级别 3）

Flexdashboard: set anchors for ### headings (level3)

anchor

r

flexdashboard