如何在R Markdown中实现按钮控制初始仅显示单个表格

要实现初始打开时只展示指定表格，需要做两处关键修改：

1. 添加CSS默认隐藏所有标签页内容 #

在原有代码开头加入一段CSS，让所有.tabcontent元素默认处于隐藏状态：

<style>
.tabcontent {
  display: none; /* 默认隐藏所有标签页内容 */
}
.tablinks.active {
  background-color: #ccc; /* 可选：给激活状态的按钮添加高亮样式，区分状态 */
}
</style>

2. 设置默认显示的表格及对应按钮状态 #

• 给需要默认展示的表格容器（例如Albany）添加style="display:block;"，强制它初始可见
• 给对应按钮添加active类，标记为激活状态

修改后的完整代码 #

<style>
.tabcontent {
  display: none; /* 默认隐藏所有标签页内容 */
}
.tablinks.active {
  background-color: #ccc; /* 可选：高亮激活的按钮 */
}
</style>

<script type="text/javascript">
 function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
 }
 
 function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}
 
</script>


#### Division 1

<div style="padding-left:125px;">


<div class="tab">
  <!-- 默认激活Albany按钮，添加active类 -->
  <button class="tablinks active" onclick="openTab(event, 'Albany')">Albany</button>
  <button class="tablinks" onclick="openTab(event, 'Buffalo')">Buffalo</button>
  <button class="tablinks" onclick="openTab(event, 'LongIsland')">Long Island</button>
  <button class="tablinks" onclick="openTab(event, 'Rochester')">Rochester</button>

</div>

<!-- 默认显示Albany表格，添加display:block样式 -->
<div id="Albany" class="tabcontent" style="display:block;">
  <p>
  
**Albany** 

|**Rank**| **City** | **No. Customers** |
|:------:|:--------:|:------------------:|
|1       | Albany   | 183   |
|2       | Schenectady   | 133   |
|3       | Clifton Park   |  124  |
|4       | Ballston Spa   |  88  |

</span>
</div>

<div id="Buffalo" class="tabcontent">
  <p>
  
**Buffalo**

|**Rank**| **City** | **No. Customers** |
|:------:|:--------:|:------------------:|
|1       | Buffalo   | 1098   |
|2       | Hamburg   | 293   |
|3       | Lancaster   |  235  |
|4       | Lockport   |  213  |

</span>
</div>

<!-- 补充剩余标签页容器，保持结构一致 -->
<div id="LongIsland" class="tabcontent">
  <p>
  **Long Island**
  <!-- 此处填入对应表格内容 -->
  </p>
</div>

<div id="Rochester" class="tabcontent">
  <p>
  **Rochester**
  <!-- 此处填入对应表格内容 -->
  </p>
</div>
</div>

补充说明 #

• 如果需要默认显示其他表格（比如Buffalo），只需把对应按钮的active类和表格容器的display:block;属性移到目标元素上即可
• 新增的active类样式是可选的，目的是让用户直观看到当前激活的按钮，可根据需求调整样式

内容的提问来源于stack exchange，提问作者Leonardo Urbiola