Блог

Я работаю над одним файлом RMD с ‘output: bookdown::html_document2’. Я заметил, что при перекрестных ссылках на рисунки в разделах с вкладками (например, # 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 мы найдем идентификатор изображения. Это может привести нас к содержащей вкладке (используя наш второй пользовательский префикс) Затем мы просто активируем вкладку и, наконец, прокручиваем страницу до самой вкладки.

Вот 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>