'commit'

dsLightRag/static/Menhu/index.html

@@ -226,18 +226,18 @@
                     <div class="tab-item active">GeoGebra AI数创工坊</div>
                     <div class="tab-item">Algodoo AI物研工坊</div>
                 </div>
+                <!-- 只有第一个内容块有active类 -->
                 <div class="tab-content active">
                     <h4 style="margin-bottom: 15px; color: var(--primary-blue);">本周研修直播日程</h4>
                     <p style="margin-bottom: 20px; color: var(--text-light);">
                         探索数学与AI的完美结合，提升数学教学效率与质量。</p>
-                    <!-- 将button改为a标签并保留原有样式类 -->
                     <a href="geogebra-ai-workshop.html" class="btn btn-outline">查看详情</a>
                 </div>
+                <!-- 第二个内容块没有active类，默认隐藏 -->
                 <div class="tab-content">
                     <h4 style="margin-bottom: 15px; color: var(--primary-blue);">本周研修直播日程</h4>
                     <p style="margin-bottom: 20px; color: var(--text-light);">
                         探索物理与AI的深度融合，提升物理实验教学效果。</p>
-                    <!-- Algodoo工坊专属链接 -->
                     <a href="algodoo-ai-workshop.html" class="btn btn-outline">查看详情</a>
                 </div>
             </div>
@@ -312,5 +312,33 @@
 </footer>
 <!-- 引入外部JS -->
 <script src="../js/main.js"></script>
+<script>
+// 选项卡切换功能
+// 选项卡切换功能
+document.querySelectorAll('.tab-item').forEach((tab, index) => {
+    tab.addEventListener('click', () => {
+        // 切换选项卡激活状态
+        document.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
+        tab.classList.add('active');
+        
+        // 切换内容区域显示
+        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+        document.querySelectorAll('.tab-content')[index].classList.add('active');
+    });
+});
+</script>
 </body>
 </html>
+
+<style>
+/* 内容区域样式 */
+.tab-content {
+    display: none; /* 默认隐藏所有选项卡内容 */
+    padding: 20px;
+    border-radius: 8px;
+    background-color: #f8f9fa;
+}
+.tab-content.active {
+    display: block; /* 仅显示带有active类的内容 */
+}
+</style>