通过选项卡集更改来更改页面

Question

我在 R 中有一个 html rmarkdown。我希望每个子部分单独出现在页面中，并且当我向下滚动时位于相同的空间中。即我希望每个块单独出现。

这可能吗？如果是，我必须进行哪些修改才能以这种方式显示？

下面是我的代码：

---
title: "test tabsets"
output:
  html_document: 
    theme: simplex
    highlight: null
    toc: true
    toc_float:
      collapsed: false
date: "2024-04-20"
---


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
options(knitr.table.format = "html") 
pagebreak <- function() {
  if(knitr::is_latex_output())
    return("\\newpage")
  else
    return('<div style="page-break-before: always;" />')
}
```


```{r, echo=FALSE , include=FALSE}
suppressPackageStartupMessages(library(tidyverse))
suppressPackageStartupMessages(library(kableExtra))
```

# Sections {.tabset .tabset-fade}
`r pagebreak()`
### summary cars
```{r cars}
summary(cars)
```
`r pagebreak()`
### Including Plots

```{r pressure, echo=FALSE}
plot(pressure)
```
`r pagebreak()`
### structure

```{r mtcars, echo=FALSE}
str(mtcars)
```

Answer 1

我不确定这是否满足您的要求，但您可以将以下脚本放入 RMarkdown 中，该脚本可能适合您。对于您想要“可缩放”的任何部分，请在标题后面添加

{.zoomable}

。

$( window ).on("load", function() {
    $( ".tocify-item" ).on("click", function() {
        var content_element_id = $( this )
            .attr("data-unique")
            .toLowerCase()
            .replace("_", "-");
            
        var content_element = $( "#" + content_element_id );
        
        if(content_element.parent().hasClass("zoomable")) {
            $( "#header" ).hide();
            $( ".section" ).hide();
            content_element.parent().show();
            content_element.show();
        } else {
            $( "#header" ).show();
            $( ".section" ).show();
        };
    });
});

像这样使用它：

---
title: "Zoomable Sections"
output:
  html_document: 
    toc: true
    toc_float:
      collapsed: false
date: "2024-04-20"
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{js, echo=FALSE}
$( window ).on("load", function() {
    $( ".tocify-item" ).on("click", function() {
        var content_element_id = $( this )
            .attr("data-unique")
            .toLowerCase()
            .replace("_", "-");
            
        var content_element = $( "#" + content_element_id );
        
        if(content_element.parent().hasClass("zoomable")) {
            $( "#header" ).hide();
            $( ".section" ).hide();
            content_element.parent().show();
            content_element.show();
        } else {
            $( "#header" ).show();
            $( ".section" ).show();
        };
    });
});
```

# Header 1

`r stringi::stri_rand_lipsum(1)`

# Zoomable Sections {.zoomable}

## Summary Cars 

```{r cars}
summary(cars)
```

## Including Plots

```{r pressure, echo=FALSE}
plot(pressure)
```

## Structure

```{r mtcars, echo=FALSE}
str(mtcars)
```

# Header 2

`r stringi::stri_rand_lipsum(1)`