web-dev-qa-db-ja.com

フレックスダッシュボードのクリックで2番目のタブセットを変更する

私は自己完結型のflexdashboardプロジェクトに取り組んでおり、ユーザーが1つのタブセットの新しいタブをクリックすると、それが2番目のタブセットの新しいタブに変わることもあるのではないかと思っています。

たとえば、下の「チャートB1」をクリックすると、2列目のビューが「チャートB2」に変更されます。 「チャートA2」をクリックすると、「チャートA1」などに戻ります。

enter image description here

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {.tabset}
-----------------------------------------------------------------------

### Chart A1

### Chart B1

Column {.tabset}
-----------------------------------------------------------------------

### Chart A2

### Chart B2

これは RStudioコミュニティに最初に投稿された でしたが、応答を受け取りませんでした。

rr-markdownflexdashboard
5
mfherman

JQueryとboostrap tabset JS関数を使用して別の答えを追加するだけです。他の回答よりも簡潔ですが、2列形式の任意の数のタブ（同じ数）でも同じように機能します。

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

```{js}
document.addEventListener("DOMContentLoaded", function(){
    $('a[data-toggle="tab"]').on('click', function(e){
      // find the tab index that is click
      child = e.target.parentNode;
      tabnum = Array.from(child.parentNode.children).indexOf(child);
      // find in which column we are
      column = $(e.target).closest("div[id]");
      // show the same tab in the other column
      columnid = column.attr("id");
      if (columnid == "column") {
        columnto = "column-1";
      } else {
        columnto = "column";
      }
      $("div[id="+columnto+"] li:eq("+tabnum+") a").tab('show');
    })
});
```

Column {.tabset}
-----------------------------------------------------------------------

### Chart A1

This is a text

### Chart B1

```{r}
plot(iris)
```


Column {.tabset}
-----------------------------------------------------------------------

### Chart A2

```{r}
plot(mtcars)
```

### Chart B2

This is another text
2
cderv