1
<style>
2
.language-container {
3
 position: relative;
4
 overflow: hidden;
5
 transition: height 0.3s ease-in-out;
6
}
7

8
.language-section {
9
 opacity: 0;
10
 transform: translateY(20px);
11
 transition: all 0.3s ease-in-out;
12
 position: absolute;
13
 top: 0;
14
 left: 0;
15
 width: 100%;
16
 visibility: hidden;  /* 使用visibility替代display */
17
 pointer-events: none;  /* 禁用未激活内容的交互 */
18
}
19

20
.language-section.active {
21
 opacity: 1;
22
 transform: translateY(0);
23
 position: relative;
24
 visibility: visible;
25
 pointer-events: auto;
26
}
27
</style>
28

29
<div class="flex items-center justify-center gap-4">
30
 <a href="#en" onclick="switchLanguage('en')" class="font-bold overflow-hidden active:scale-95">
31
   <div class="btn-card max-w-fit rounded-md h-[2.75rem] px-4 flex items-center justify-start gap-2 bg-black/5 dark:bg-white/10">
32
     <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap text-[var(--primary)]/75 dark:text-[var(--primary)]/75">
33
       English
34
     </div>
35
   </div>
36
 </a>
37
 <div class="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
38
 <a href="#zh" onclick="switchLanguage('zh')" class="font-bold overflow-hidden active:scale-95">
39
   <div class="btn-card max-w-fit rounded-md h-[2.75rem] px-4 flex items-center justify-start gap-2 bg-black/5 dark:bg-white/10">
40
     <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap text-[var(--primary)]/75 dark:text-[var(--primary)]/75">
41
       中文
42
     </div>
43
   </div>
44
 </a>
45
 <div class="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
46
 <a href="#jp" onclick="switchLanguage('jp')" class="font-bold overflow-hidden active:scale-95">
47
   <div class="btn-card max-w-fit rounded-md h-[2.75rem] px-4 flex items-center justify-start gap-2 bg-black/5 dark:bg-white/10">
48
     <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap text-[var(--primary)]/75 dark:text-[var(--primary)]/75">
49
       日本語
50
     </div>
51
   </div>
52
 </a>
53
</div>
54

55
<div class="language-container show-en">
56
 <div id="en-section" class="language-section active">
57

58
<br/>
59

60
# English content
61
---
62

63

64
 </div>
65

66
 <div id="zh-section" class="language-section">
67

68
<br/>
69

70
# 中文内容
71
---
72

73
 </div>
74

75
 <div id="jp-section" class="language-section">
76

77
<br/>
78

79
# 日本のコンテンツ
80
---
81
 </div>
82
</div>
83

84

85

86
<script>
87
function switchLanguage(lang) {
88
   const container = document.querySelector('.language-container');
89
   const sections = container.querySelectorAll('.language-section');
90
   const newActive = document.getElementById(`${lang}-section`);
91

92
   if (!newActive) return;
93

94
   // 获取当前激活的部分
95
   const currentActive = container.querySelector('.language-section.active');
96

97
   if (currentActive) {
98
       // 淡出当前内容
99
       currentActive.style.opacity = '0';
100
       currentActive.style.transform = 'translateY(20px)';
101

102
       // 等待淡出动画完成后再切换
103
       setTimeout(() => {
104
           currentActive.classList.remove('active');
105

106
           // 准备新内容
107
           newActive.style.opacity = '0';
108
           newActive.style.transform = 'translateY(20px)';
109
           newActive.classList.add('active');
110

111
           // 触发重排以启动动画
112
           void newActive.offsetWidth;
113

114
           // 淡入新内容
115
           newActive.style.opacity = '1';
116
           newActive.style.transform = 'translateY(0)';
117

118
           // 调整容器高度
119
           container.style.height = `${newActive.scrollHeight}px`;
120

121
           setTimeout(() => {
122
               container.style.height = 'auto';
123
           }, 300);
124
       }, 300);
125
   } else {
126
       // 首次加载直接显示
127
       newActive.classList.add('active');
128
       newActive.style.opacity = '1';
129
       newActive.style.transform = 'translateY(0)';
130
   }
131
}
132

133
// 页面加载时默认显示英文
134
document.addEventListener('DOMContentLoaded', function() {
135
   switchLanguage('en');
136
});
137
</script>