Изменить страницу с изменением набора вкладок

У меня есть html-разметка в R. Я хочу, чтобы каждый подраздел отображался на странице отдельно и находился в одном и том же месте при прокрутке вниз. То есть я хочу, чтобы каждый фрагмент появлялся сам по себе.

Это возможно? И если да, какие изменения мне нужно внести, чтобы это выглядело таким образом?

Ниже мой код:

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

Я не очень понимаю. Что вы имеете в виду под «каждый фрагмент появляется сам по себе»? У вас есть пример ссылки на страницу или изображение, которое показывает желаемый результат?

Jan 21.04.2024 15:20

@Jan Я имею в виду, что если я нажму на вкладку, включающую графики, я хочу увидеть только этот график, а не предыдущие сводные автомобили и часть структуры (следующая вкладка). Теперь представьте, что вместо того, чтобы нажимать на каждую вкладку, чтобы прокрутить вниз. Каждая вкладка должна быть отдельной страницей. Это как перелистывание страницы книги.

Homer Jay Simpson 21.04.2024 15:29
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
93
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не уверен, соответствует ли это вашим требованиям, но вот скрипт, который вы можете добавить в свой RMarkdown, и он может вам подойти. Для любых разделов, которые вы хотите сделать «масштабируемыми», добавьте {.zoomable} позади заголовка.

$( window ).on("load", function() {
    $( ".tocify-item" ).on("click", function() {
        var toc_element = $( this );
        var duv = toc_element.attr("data-unique");
        
        var content_element = $( 'div[data-unique = "' + duv + '"]' ).parent();
        
        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 toc_element = $( this );
        var duv = toc_element.attr("data-unique");
        
        var content_element = $( 'div[data-unique = "' + duv + '"]' ).parent();
        
        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)`

Другие вопросы по теме