bookdown：交叉引用选项卡部分中的内容

Question

我正在处理带有“输出：bookdown::html_document2”的单个 RMD 文件。我注意到，当交叉引用选项卡部分中的数字时（例如#Header {.tabset}），单击链接对第一个选项卡中的内容很有效，但不适用于以下任何选项卡。我的意思是，单击第二个选项卡中链接到该图的数字不会打开/激活第二个选项卡。

在有关交叉引用的大量问题中，我找不到任何处理相同问题的方法。我担心通过单击交叉引用可能无法“激活”选项卡，但我确实希望找到一些解决方法。我很高兴收到任何提示。

这是一个最小的例子：

---
title: "Untitled"
date: "17 2 2021"
output:   
  bookdown::html_document2:
    number_sections: FALSE

---

# First section  {.tabset}

## Subsection 1

```{r plot1, fig.cap="A first figure"}
plot(cars)
```

## Subsection 2

```{r plot2, fig.cap="A second figure"}
plot(cars)
```

# Second section

Here I want to cross-reference Figures \@ref(fig:plot1) and \@ref(fig:plot2)
```

Answer 1

如果我们看一下最终创建的html，“数字链接”是一个普通的html锚标签，链接到图像本身，所以点击它页面将滚动到数字位置，而不激活包含标签。

按照@cderv 的建议，我会添加一些 js 代码以达到您想要的结果。

首先我会处理命名：

1. 为选项卡中包含的图像设置命名约定（例如，只需添加固定前缀“TBIMG-”）
2. 为包含此类图像的选项卡设置命名约定（例如，另一个自定义前缀“TBTAB-”+图形名称）

所以我们最终会在“TBTAB-name1”、“TBTAB-name2”等中包含名称为“TBIMG-name1”、“TBIMG-name2”等的图像。

现在我们只需要将功能绑定到“数字链接”的点击事件（仅具有我们特殊前缀的那些）。 在他们的 href 属性中，我们会找到图像 id。 这可以将我们引导到包含选项卡（使用我们的第二个自定义前缀） 然后我们只需激活选项卡，最后将页面滚动到选项卡本身。

这是你需要添加的JS代码：

$(document).on("click", 'a[href^="#fig:TBIMG"]', function(event){
    //this in order to prevent the page to scroll to the image itself
    event.preventDefault();

    //from the img name we build the tab name
    var tabKey = 'TBTAB' + $(this).attr('href').replace('#fig:TBIMG', '');

    //set the tab active
    var tabPlc = $('.nav[role="tablist"] a[href="#' + tabKey + '"]')
    tabPlc.tab('show');

    //the page scrolls to the tab containing the image
    $("html, body").animate({ scrollTop: tabPlc.offset().top }, 700);
});

Answer 2

也许这可以帮助你：

---
title: "Untitled"
date: "17 2 2021"
output:   
  bookdown::html_document2:
    number_sections: FALSE

---

# First section  {.tabset}

## Subsection 1

```{r plot1, fig.cap="A first figure"}
plot(cars)
```

## Subsection 2

```{r plot2, fig.cap="A second figure"}
plot(cars)
```

# Second section

Here I want to cross-reference Figures [1](#subsection-1) and [2](#subsection-2)

链接很好，但在 Firefox 和 Chromium 上都不起作用。我不知道为什么当我们点击链接时它不刷新窗口。

这是用于激活选项卡的 Html 代码（第 2 小节）（我知道如何在这里实现它，抱歉）：

<a role="tab" data-toggle="tab" href="#subsection-2" aria-controls="subsection-2" aria-expanded="true">Subsection 2</a>