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

如何解决bookdown：交叉引用选项卡式部分中的内容

我正在处理带有“输出：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)
```

解决方法

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

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

首先我会致力于命名：

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

因此，我们最终将拥有名称为“TBIMG-name1”、“TBIMG-name2”等的图像。包含在“TBTAB-name1”、“TBTAB-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);
});

,

也许这可以帮助您：

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