如何用HTML和CSS实现网页语言切换按钮及内容切换？

步骤1：修正HTML结构 #

• 移除语言切换按钮的跳转链接，添加data-lang属性标识对应语言，避免页面跳转
• 修复内容中的语言属性错误（比如“Recent Reading”区块的lang需设为en）
• 补充导航菜单的英语版本

修正后的HTML代码：

<body>
  <div class="blk">
    <div class="jp_head">
      <h1 lang="ja">リモートボックス</h1>
      <h1 lang="en">Remote Box</h1>
    </div>
    <div class="btns">
      <a href="#" data-lang="ja">日本語</a>
      <a href="#" data-lang="en">英語</a>
    </div>
  </div>
  <nav class="bread">
    <ul>
      <li lang="ja">
        <a href="./index.html">ホーム</a><span>&gt;</span><a href="./works.html">作品集</a>
      </li>
      <li lang="en">
        <a href="./index.html">HOME</a><span>&gt;</span><a href="./works.html">Works</a>
      </li>
    </ul>
  </nav>
  <div class="menu">
    <div class="links">
      <li lang="ja" class="links-item">
        <a href="./index.html">ホーム</a>
      </li>
      <li lang="ja" class="links-item">
        <a href="./works.html">作品集</a>
      </li>
      <li lang="ja" class="links-item">
        <a href="./skills.html">スキル</a>
      </li>
      <li lang="ja" class="links-item">
        <a href="./contact.html">お問い合わせ</a>
      </li>
      <!-- 补充英语菜单 -->
      <li lang="en" class="links-item">
        <a href="./index.html">HOME</a>
      </li>
      <li lang="en" class="links-item">
        <a href="./works.html">Works</a>
      </li>
      <li lang="en" class="links-item">
        <a href="./skills.html">Skills</a>
      </li>
      <li lang="en" class="links-item">
        <a href="./contact.html">Contact</a>
      </li>
    </div>
  </div>
  <div>
    <details>
      <summary lang="ja">コンテンツ</summary>
      <summary lang="en">Contents</summary>
      <ul class="toc">
        <li><a href="#clm_ja_py">Python</a></li>
        <li><a href="#clm_ja_py">JavaScript</a></li>
        <li><a href="#clm_ja_py">UiPath</a></li>
      </ul>
    </details>
  </div>
  <main>
    <div class="clms">
      <div class="clm_1" id="clm_ja_py" lang="ja">
        Python <br> Pythonに関しては、以下のスクリプトを作成したことがあります。
        <ul>
          <li>
            <p>
              Webスクレイピング: 特定のサイトより指定した記事を取得しCSVに出力
            </p>
          </li>
          <li>
            <p>
              英単語帳GUI: Tkinterを使用したフラッシュ単語帳
            </p>
          </li>
          <li>
            <p>
              PowerPoint自動生成プログラム: pptx資料を自動出力します
            </p>
          </li>
        </ul>
      </div>
      <div class="clm_1" id="clm_en_py" lang="en">
        Python <br> I have written these scripts below.
        <ul>
          <li>
            <p>
              Webscrape: access to a web page and output its specific texts into a csv file
            </p>
          </li>
          <li>
            <p>
              Vocabulary GUI: you can see a pair of English words and translations, which appear one after another on the GUI.
            </p>
          </li>
          <li>
            <p>
              RPA for PowerPoint: output pptx files as used for daily reports
            </p>
          </li>
        </ul>
      </div>
      <div class="clm_2" lang="ja">
        最近の読書 <br>
        <p><a href="#">こちら</a>よりご覧ください</p>
      </div>
      <!-- 修正语言属性 -->
      <div class="clm_2" lang="en">
        Recent Reading <br>
        <p>See <a href="#">Here</a></p>
      </div>
    </div>
  </main>
  <div class="comment">
    <p lang="ja">ご興味が下記にあれば連絡ください。<br> "メールアドレス"</p>
    <p lang="en">Feel free to e-mail me if you are interested<br> "mail adress to be written"</p>
  </div>
  <footer>
    <div lang="ja">
      <a class="foot" href="./index.html">ホーム</a>
      <span>&gt;</span>
      <a class="foot" href="./works.html">作品集</a>
    </div>
    <div lang="en">
      <a class="foot" href="./index.html">HOME</a>
      <span>&gt;</span>
      <a class="foot" href="./works.html">Works</a>
    </div>
  </footer>
</body>

步骤2：调整CSS样式 #

移除原有的*:lang(en) { display: none; }，改用类控制语言显示状态，兼容不同元素的默认display属性：

body {
  margin: 0;
}

.blk {
  background-color: aqua;
}

.jp_head {
  float: left;
}

h1 {
  font-size: 36px;
}

.btns {
  float: right;
}

.btns a {
  text-decoration: none;
  background-color: lightyellow;
  border: 1.5px solid;
  border-color: black;
  padding: 4px;
  margin-left: 8px;
}

nav {
  clear: both;
}

nav>ul {
  padding-left: 0;
}

nav>ul>li {
  list-style: none;
}

.menu {
  background-color: blue;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.links li {
  display: none;
}

.links li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  padding: 1em;
}

details {
  clear: both;
  margin: 12px;
}

details summary[lang="en"] {
  display: none;
}

ul.toc {
  background-color: lightgray;
  width: 100px;
  height: auto;
}

.clms {
  display: flex;
  height: auto;
}

.clm_1 {
  background-color: lightyellow;
  flex: 2;
  margin-right: auto;
  border: 0.5px solid gray;
}

.clm_2 {
  flex: 1;
  background-color: lightgreen;
  margin-left: auto;
}

.comment {
  clear: both;
}

footer {
  margin-top: 50px;
}

/* 语言切换核心样式 */
[lang="ja"], [lang="en"] {
  display: none;
}

/* 显示激活语言的元素 */
.lang-active[lang="ja"], .lang-active[lang="en"] {
  display: block;
}

/* 特殊元素单独处理display */
.lang-active[lang="ja"]:is(h1, li, p),
.lang-active[lang="en"]:is(h1, li, p) {
  display: block;
}

.lang-active[lang="ja"]:is(li.links-item),
.lang-active[lang="en"]:is(li.links-item) {
  display: inline;
}

details .lang-active[lang="ja"],
details .lang-active[lang="en"] {
  display: list-item;
}

步骤3：添加JavaScript逻辑 #

给语言按钮绑定点击事件，切换对应语言元素的显示状态：

// 获取语言按钮和所有语言元素
const langButtons = document.querySelectorAll('.btns a');
const langElements = document.querySelectorAll('[lang="ja"], [lang="en"]');

// 初始化：默认显示日语
langElements.forEach(el => {
  if (el.lang === 'ja') {
    el.classList.add('lang-active');
  }
});

// 绑定点击事件
langButtons.forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    const targetLang = btn.dataset.lang;

    // 移除所有元素的激活类
    langElements.forEach(el => {
      el.classList.remove('lang-active');
    });

    // 给目标语言元素添加激活类
    document.querySelectorAll(`[lang="${targetLang}"]`).forEach(el => {
      el.classList.add('lang-active');
    });
  });
});

功能说明 #

点击“日本語”按钮时，所有lang="ja"的元素会显示，lang="en"元素隐藏；点击“英語”按钮则反之。该方案扩展性强，后续新增语言只需添加对应lang属性的内容和带data-lang的按钮即可。

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