时间戳

首页 > 解决方案 > bookdown：交叉引用选项卡部分中的内容

html - 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)
```

标签： htmlrr-markdownbookdowncross-reference

解决方案

如果我们看一下最终创建的 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);
});

推荐阅读