在 flexdashboard 中单击更改第二个选项卡
Change second tabset on click in flexdashboard
我正在开发一个独立的 flexdashboard 项目，我想知道是否有可能当用户单击一个选项卡集中的新选项卡时，它也会更改为第二个选项卡集中的新选项卡。
因此，例如，当您点击下面的 "Chart B1" 时，我也想在第二列中将视图更改为 "Chart B2"。点击 "Chart A2" 会变回 "Chart A1"，等等
---
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
请注意，这是 first posted on RStudio Community，但没有收到任何回复。
这可以通过 JavaScript 实现。幸运的是，Knitr 支持嵌入式 Javascript。我是一名R程序员，所以这不一定是最简洁的实现，但确实达到了正确的效果。
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {.tabset}
-----------------------------------------------------------------------
### Chart A1
Chart A1 is Great
### Chart B1
Chart B1 is Great
Column {.tabset}
-----------------------------------------------------------------------
### Chart A2
Chart A2 is Great
### Chart B2
Chart B2 is Great
```{js}
// Once the Document Has Fully Loaded
document.addEventListener("DOMContentLoaded", function(){
// Select The Tabs
window.a1Tab = document.querySelector("#column > ul > li:nth-child(1)");
window.b1Tab = document.querySelector("#column > ul > li:nth-child(2)");
window.a2Tab = document.querySelector("#column-1 > ul > li:nth-child(1)");
window.b2Tab = document.querySelector("#column-1 > ul > li:nth-child(2)");
// Select the Panel Content
window.a1Panel = document.getElementById('chart-a1');
window.b1Panel = document.getElementById('chart-b1');
window.a2Panel = document.getElementById('chart-a2');
window.b2Panel = document.getElementById('chart-b2');
// If We Click on B1, Open B2, Close A2
b1Tab.addEventListener('click', function(){
a2Tab.classList.remove('active');
a2Tab.children[0].setAttribute('aria-expanded', true);
a2Panel.classList.remove('active');
b2Tab.classList.add('active');
b2Tab.children[0].setAttribute('aria-expanded', true);
b2Panel.classList.add('active');
}, false);
// If We Click on B2, Open B1, Close A1
b2Tab.addEventListener('click', function(){
a1Tab.classList.remove('active');
a1Tab.children[0].setAttribute('aria-expanded', true);
a1Panel.classList.remove('active');
b1Tab.classList.add('active');
b1Tab.children[0].setAttribute('aria-expanded', true);
b1Panel.classList.add('active');
}, false);
// If We Click on A1, Open A2, Close B2
a1Tab.addEventListener('click', function(){
b2Tab.classList.remove('active');
b2Tab.children[0].setAttribute('aria-expanded', true);
b2Panel.classList.remove('active');
a2Tab.classList.add('active');
a2Tab.children[0].setAttribute('aria-expanded', true);
a2Panel.classList.add('active');
}, false);
// If We Click on A2, Open A1, Close B1
a2Tab.addEventListener('click', function(){
b1Tab.classList.remove('active');
b1Tab.children[0].setAttribute('aria-expanded', true);
b1Panel.classList.remove('active');
a1Tab.classList.add('active');
a1Tab.children[0].setAttribute('aria-expanded', true);
a1Panel.classList.add('active');
}, false);
});
```
编辑：对于无限数量的选项卡，假设第一列和第二列中的选项卡数量始终相同。同样免责声明，这不一定是最简洁的实现，但达到了预期的效果。
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {.tabset}
-----------------------------------------------------------------------
### Chart A1
Chart A1 is Great
### Chart B1
Chart B1 is Great
### Chart C1
Chart C1 is Great
### Chart D1
Chart D1 is Great
Column {.tabset}
-----------------------------------------------------------------------
### Chart A2
Chart A2 is Great
### Chart B2
Chart B2 is Great
### Chart C2
Chart C2 is Great
### Chart D2
Chart D2 is Great
```{js}
// Once the Document Has Fully Loaded
document.addEventListener("DOMContentLoaded", function(){
// Select The Tabs
window.col1Tabs = document.querySelector("#column > ul");
window.col2Tabs = document.querySelector("#column-1 > ul");
// Select the Panel Content
window.col1Panels = document.querySelector("#column > div");
window.col2Panels = document.querySelector("#column-1 > div");
// Function to Make Tabs Active
window.handleTab = function(tabIndex){
for(i=0;i<col1Tabs.childElementCount;i++){
col1Tabs.children[i].classList.remove('active');
col2Tabs.children[i].classList.remove('active');
col1Panels.children[i].classList.remove('active');
col2Panels.children[i].classList.remove('active');
}
col1Tabs.children[tabIndex].classList.add('active');
col2Tabs.children[tabIndex].classList.add('active');
col1Panels.children[tabIndex].classList.add('active');
col2Panels.children[tabIndex].classList.add('active');
}
// For All Tabs, Add Event Listener
for(i=0;i<col1Tabs.childElementCount;i++){
col1Tabs.children[i].setAttribute('onclick', 'handleTab(' + i + ');');
col2Tabs.children[i].setAttribute('onclick', 'handleTab(' + i + ');');
}
});
```
编辑：对于以后可能会发现此问题的任何人，Github Issue.
中添加了具有更大灵活性的 JQuery 实现
只是使用 JQuery 和 boostrap tabset JS 函数添加另一个答案。
它比其他答案更简洁，但与两列格式中的任意数量的选项卡（但数量相同）相同。
---
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
我正在开发一个独立的 flexdashboard 项目，我想知道是否有可能当用户单击一个选项卡集中的新选项卡时，它也会更改为第二个选项卡集中的新选项卡。
因此，例如，当您点击下面的 "Chart B1" 时，我也想在第二列中将视图更改为 "Chart B2"。点击 "Chart A2" 会变回 "Chart A1"，等等
---
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
请注意，这是 first posted on RStudio Community，但没有收到任何回复。
这可以通过 JavaScript 实现。幸运的是，Knitr 支持嵌入式 Javascript。我是一名R程序员，所以这不一定是最简洁的实现，但确实达到了正确的效果。
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {.tabset}
-----------------------------------------------------------------------
### Chart A1
Chart A1 is Great
### Chart B1
Chart B1 is Great
Column {.tabset}
-----------------------------------------------------------------------
### Chart A2
Chart A2 is Great
### Chart B2
Chart B2 is Great
```{js}
// Once the Document Has Fully Loaded
document.addEventListener("DOMContentLoaded", function(){
// Select The Tabs
window.a1Tab = document.querySelector("#column > ul > li:nth-child(1)");
window.b1Tab = document.querySelector("#column > ul > li:nth-child(2)");
window.a2Tab = document.querySelector("#column-1 > ul > li:nth-child(1)");
window.b2Tab = document.querySelector("#column-1 > ul > li:nth-child(2)");
// Select the Panel Content
window.a1Panel = document.getElementById('chart-a1');
window.b1Panel = document.getElementById('chart-b1');
window.a2Panel = document.getElementById('chart-a2');
window.b2Panel = document.getElementById('chart-b2');
// If We Click on B1, Open B2, Close A2
b1Tab.addEventListener('click', function(){
a2Tab.classList.remove('active');
a2Tab.children[0].setAttribute('aria-expanded', true);
a2Panel.classList.remove('active');
b2Tab.classList.add('active');
b2Tab.children[0].setAttribute('aria-expanded', true);
b2Panel.classList.add('active');
}, false);
// If We Click on B2, Open B1, Close A1
b2Tab.addEventListener('click', function(){
a1Tab.classList.remove('active');
a1Tab.children[0].setAttribute('aria-expanded', true);
a1Panel.classList.remove('active');
b1Tab.classList.add('active');
b1Tab.children[0].setAttribute('aria-expanded', true);
b1Panel.classList.add('active');
}, false);
// If We Click on A1, Open A2, Close B2
a1Tab.addEventListener('click', function(){
b2Tab.classList.remove('active');
b2Tab.children[0].setAttribute('aria-expanded', true);
b2Panel.classList.remove('active');
a2Tab.classList.add('active');
a2Tab.children[0].setAttribute('aria-expanded', true);
a2Panel.classList.add('active');
}, false);
// If We Click on A2, Open A1, Close B1
a2Tab.addEventListener('click', function(){
b1Tab.classList.remove('active');
b1Tab.children[0].setAttribute('aria-expanded', true);
b1Panel.classList.remove('active');
a1Tab.classList.add('active');
a1Tab.children[0].setAttribute('aria-expanded', true);
a1Panel.classList.add('active');
}, false);
});
```
编辑：对于无限数量的选项卡，假设第一列和第二列中的选项卡数量始终相同。同样免责声明，这不一定是最简洁的实现，但达到了预期的效果。
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {.tabset}
-----------------------------------------------------------------------
### Chart A1
Chart A1 is Great
### Chart B1
Chart B1 is Great
### Chart C1
Chart C1 is Great
### Chart D1
Chart D1 is Great
Column {.tabset}
-----------------------------------------------------------------------
### Chart A2
Chart A2 is Great
### Chart B2
Chart B2 is Great
### Chart C2
Chart C2 is Great
### Chart D2
Chart D2 is Great
```{js}
// Once the Document Has Fully Loaded
document.addEventListener("DOMContentLoaded", function(){
// Select The Tabs
window.col1Tabs = document.querySelector("#column > ul");
window.col2Tabs = document.querySelector("#column-1 > ul");
// Select the Panel Content
window.col1Panels = document.querySelector("#column > div");
window.col2Panels = document.querySelector("#column-1 > div");
// Function to Make Tabs Active
window.handleTab = function(tabIndex){
for(i=0;i<col1Tabs.childElementCount;i++){
col1Tabs.children[i].classList.remove('active');
col2Tabs.children[i].classList.remove('active');
col1Panels.children[i].classList.remove('active');
col2Panels.children[i].classList.remove('active');
}
col1Tabs.children[tabIndex].classList.add('active');
col2Tabs.children[tabIndex].classList.add('active');
col1Panels.children[tabIndex].classList.add('active');
col2Panels.children[tabIndex].classList.add('active');
}
// For All Tabs, Add Event Listener
for(i=0;i<col1Tabs.childElementCount;i++){
col1Tabs.children[i].setAttribute('onclick', 'handleTab(' + i + ');');
col2Tabs.children[i].setAttribute('onclick', 'handleTab(' + i + ');');
}
});
```
编辑：对于以后可能会发现此问题的任何人，Github Issue.
中添加了具有更大灵活性的 JQuery 实现只是使用 JQuery 和 boostrap tabset JS 函数添加另一个答案。 它比其他答案更简洁，但与两列格式中的任意数量的选项卡（但数量相同）相同。
---
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