如何在HTML中实现支持多语言选择的代码块嵌入

下面是一个可直接复用的多语言选择代码块实现，完全用HTML/CSS/JavaScript编写，适合API落地页使用：

完整代码示例 #

HTML结构 #

<div class="code-block-container">
  <!-- 语言选择栏 -->
  <div class="language-selector">
    <button class="lang-btn active" data-lang="javascript">JavaScript</button>
    <button class="lang-btn" data-lang="python">Python</button>
    <button class="lang-btn" data-lang="java">Java</button>
  </div>
  <!-- 代码展示区 -->
  <pre class="code-content">
    <code class="lang-javascript active">
// JavaScript 调用API示例
function fetchAPI(url) {
  return fetch(url)
    .then(response => response.json())
    .catch(error => console.error('请求失败:', error));
}
    </code>
    <code class="lang-python">
# Python 调用API示例
import requests

def fetch_api(url):
    try:
        response = requests.get(url)
        return response.json()
    except Exception as e:
        print('请求失败:', e)
    </code>
    <code class="lang-java">
// Java 调用API示例
import java.io.IOException;
import org.apache.http.client.fluent.Request;

public class APIFetcher {
    public static String fetchAPI(String url) throws IOException {
        return Request.Get(url)
            .execute()
            .returnContent()
            .asString();
    }
}
    </code>
  </pre>
</div>

CSS样式 #

.code-block-container {
  width: 85%;
  margin: 2rem auto;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.language-selector {
  display: flex;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.lang-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.lang-btn.active {
  background-color: #fff;
  border-bottom: 2px solid #3b82f6;
  font-weight: 600;
}

.lang-btn:hover {
  background-color: #f1f5f9;
}

.code-content {
  background-color: #fff;
  padding: 1.2rem;
  overflow-x: auto;
  margin: 0;
}

.code-content code {
  display: none;
  line-height: 1.6;
  font-size: 0.9rem;
}

.code-content code.active {
  display: block;
}

JavaScript切换逻辑 #

const langBtns = document.querySelectorAll('.lang-btn');
const codeBlocks = document.querySelectorAll('.code-content code');

langBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 切换按钮激活状态
    langBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    
    // 切换对应代码块显示
    const targetLang = btn.dataset.lang;
    codeBlocks.forEach(block => block.classList.remove('active'));
    document.querySelector(`.lang-${targetLang}`).classList.add('active');
  });
});

自定义与扩展建议 #

• 样式调整：可以修改CSS中的颜色值（比如#3b82f6是激活态的蓝色）、字体、容器宽度等，适配你的落地页风格。
• 代码高亮：如果需要语法高亮效果，可集成Prism.js或Highlight.js这类工具，只需要引入它们的官方CSS和JS文件，再给code标签添加对应语言的类名即可（比如Prism.js中language-javascript）。
• 新增语言：只需在HTML中添加对应的按钮和代码块，无需修改JS逻辑。

学习资源推荐 #

• 基础入门：可以看MDN的CSS基础教程，学习容器布局、类切换等核心知识点；搜索“CSS标签切换实战”类视频，快速掌握这类交互的实现逻辑。
• 进阶优化：如果想了解代码高亮库的使用，直接查看Prism.js或Highlight.js的官方文档，里面有详细的集成步骤。

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