Flexdashboard:为####标题设置锚定（级别3）

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

• 标题级别1：它们是页面
• 标题级别2：我们指定

  行

  或

  列

• 标题级别3：制表符

现在对于锚，我们似乎只能将其设置为航向1级。正如我们在书中看到的那样

我的问题是，是否可以为选项卡创建锚定（所以标题级别为3）

我试图找到一个解决办法。例如，使用以下代码：

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

## Row {.tabset}

### tab 1 {#test1}

### tab 2 {#test2}

自动为“第4页”创建锚定，即

#Page-4

。对于“Tab1”，我试图添加

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

$（'.btnNext'）。单击（函数（）{
$（'.nav tabs>.active'）。下一步（'li'）。查找（'a'）。触发（'click'）；
});
$（'.btnprevous'）。单击（函数（）{
$（'.nav tabs>.active'）.prev（'li'）.find（'a'）.trigger（'click'）；
});

然后，我们可以创建用于导航的按钮

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

下一步
以前的

---

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

更新

我现在通过点击一个链接，找到了从第4页到第5页的方法。我使用一点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}

等）即使在不使用

运行时：shinny

时也能工作。您可以通过操作按钮更改

选项卡

，但前提是您位于同一页面上。例如，您可以从

第4页的
选项卡1
到
选项卡2
，但不能从
第4页的
选项卡1
到
第5页的
选项卡4
。但是从
第4页
更改为
第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"
             ))

```

谢谢你的回答。但是我不使用shiny，而且对于静态html文件（使用rmarkdown:：render生成的flexdashboard），标记“#section-test1”似乎不存在。“#test1”，但在url中指定时，相应的选项卡没有显示。现在我删除了
runtime:shinny
。原来，前缀
部分-
是由
添加的。在我的例子中，上面的示例在呈现为HTML时有效。但是，仍然无法从
第4页
选项卡1
直接转到
第5页
选项卡4
，但是更改同一页上的选项卡以及从一页更改到另一页是可行的。上面的例子使用了{shinny}s
actionButton
，但是基本上你可以把
标签$a（…）
包装在任何东西周围。谢谢TimTeaFan，这些按钮很好用。但是，当我在url中直接输入#时，例如“link_flexdashbord.html#test3”，它将无法工作。你知道为什么吗？谢谢你你描述的问题和我上面指出的是一样的。如果网站显示第5页
“链接_flexdashbord.html#test4
，它将打开正确的选项卡，但当
第5页
未打开时，这将不起作用。我有一个想法，可以使用javascript实现这一点，我会在它运行后发布一个更新。@Xiaoshi:我用一种新的方法更新了我的答案，请看一看。