|
|
| 第1行： |
第1行： |
| <div class="mdtLayout mdtLight mdtWrapRail"> | | <div class="mdtLayout mdtLight mdtWrapRail"> |
| <div class="mdtMain"> | | <div class="mdtMain"> |
| <span class="heimu"> 测试 </span>
| |
| <div class="tab-container">
| |
| <div class="tab-buttons">
| |
| <button class="tab-button active" data-tab="tab1">煤炭发电机</button>
| |
| <button class="tab-button" data-tab="tab2">太阳能发电机</button>
| |
| </div>
| |
|
| |
| <div id="tab1" class="tab-content active">
| |
| {| class="mdtSideTable"
| |
| ! 输入 !!<!-- 不要删除这里的空白表头 -->
| |
| ! 输出 !!
| |
| ! 消耗电力
| |
| ! 生产时间
| |
| |-
| |
| | 1.33[[File:Item-coal-ui.png|18px|link=煤炭]]/秒 || (2[[File:Item-coal-ui.png|18px|link=煤炭]])
| |
| | 0.66[[File:Item-graphite-ui.png|18px|link=石墨]]/秒 || (1[[File:Item-graphite-ui.png|18px|link=石墨]])
| |
| | 无
| |
| | 1.5秒
| |
| |}
| |
| </div>
| |
|
| |
| <div id="tab2" class="tab-content">
| |
| {| class="mdtSideTable"
| |
| ! 输入 !!<!-- 不要删除这里的空白表头 -->
| |
| ! 输出 !!
| |
| ! 消耗电力
| |
| ! 生产时间
| |
| |-
| |
| | 无 ||
| |
| | 1[[File:Item-energy-ui.png|18px|link=能量]]/秒 ||
| |
| | 无
| |
| | 持续
| |
| |}
| |
| </div>
| |
| </div>
| |
|
| |
|
| <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 => {
| | {| class="mdtSideTable" |
| button.addEventListener('click', function() {
| | ! 输入 !!<!-- 不要删除这里的空白表头 --> |
| // 移除所有active类
| | ! 输出 !! |
| document.querySelectorAll('.tab-button, .tab-content').forEach(el => {
| | ! 消耗电力 |
| el.classList.remove('active');
| | ! 生产时间 |
| });
| | |- |
|
| | | 1.33[[File:Item-coal-ui.png|18px|link=煤炭]]/秒 || (2[[File:Item-coal-ui.png|18px|link=煤炭]]) |
| // 激活当前按钮和对应内容
| | | 0.66[[File:Item-graphite-ui.png|18px|link=石墨]]/秒 || (1[[File:Item-graphite-ui.png|18px|link=石墨]]) |
| this.classList.add('active');
| | | 无 |
| const tabId = this.getAttribute('data-tab');
| | | 1.5秒 |
| document.getElementById(tabId).classList.add('active');
| | |} |
| });
| | |-| |
| });
| | 太阳能发电机= |
| </script> | | {| class="mdtSideTable" |
| | ! 输入 !!<!-- 不要删除这里的空白表头 --> |
| | ! 输出 !! |
| | ! 消耗电力 |
| | ! 生产时间 |
| | |- |
| | | 无 || |
| | | 1[[File:Item-energy-ui.png|18px|link=能量]]/秒 || |
| | | 无 |
| | | 持续 |
| | |} |
| | |
| | </div> |
|
| |
|
| </div> | | </div> |
/秒
/秒
