用户讨论:Neko copper

测试

   <button class="tab-button active" data-tab="tab1">煤炭发电机</button>
   <button class="tab-button" data-tab="tab2">太阳能发电机</button>

输入		输出		消耗电力	生产时间
1.33/秒	(2)	0.66/秒	(1)	无	1.5秒

输入		输出		消耗电力	生产时间
无		1文件:Item-energy-ui.png/秒		无	持续

<style> .tab-container {

 margin: 1em 0;

} .tab-buttons {

 display: flex;
 border-bottom: 1px solid #ccc;

} .tab-button {

 padding: 8px 16px;
 background: #f5f5f5;
 border: 1px solid #ccc;
 border-bottom: none;
 cursor: pointer;
 margin-right: 4px;
 border-radius: 4px 4px 0 0;

} .tab-button.active {

 background: white;
 border-bottom: 1px solid white;
 margin-bottom: -1px;

} .tab-content {

 display: none;
 padding: 10px;
 border: 1px solid #ccc;
 border-top: none;

} .tab-content.active {

 display: block;

} </style>

<script> document.querySelectorAll('.tab-button').forEach(button => {

 button.addEventListener('click', function() {
   // 移除所有active类
   document.querySelectorAll('.tab-button, .tab-content').forEach(el => {
     el.classList.remove('active');
   });
   
   // 激活当前按钮和对应内容
   this.classList.add('active');
   const tabId = this.getAttribute('data-tab');
   document.getElementById(tabId).classList.add('active');
 });

}); </script>