戻る


トグルスイッチ
言語切替のサンプル

[サンプル]

現在の言語: 日本語


[HTML/CSS]

copy
const toggle = document.getElementById("langToggle");
const hiddenLang = document.getElementById("langValue");
const langText = document.getElementById("langText");

// change event
toggle.addEventListener("change", () => 
{
	if (toggle.checked) 
	{
		// English
		hiddenLang.value = 1;
		langText.textContent = "current language: English";
	} 
	else 
	{
		// japanese
		hiddenLang.value = 0;
		langText.textContent = "現在の言語: 日本語";
	}

  console.log("hidden value:", hiddenLang.value);
});

input:checked + .slider {
ON/OFF で背景色を切り替えています。

input:checked + .slider { ... }
チェックボックスが チェックされた状態 (:checked) のとき
その直後にある .slider 要素にスタイルを適用します。

input:checked + .slider:before { ... }
上記の条件に加えて、.slider の 擬似要素 ::before にスタイルを適用します。


[JPに切り替えたケース]
.slider:before {
...
  content:"JP";
  text-align: center;
}

[ENに切り替えたケース]
input:checked + .slider:before {
  transform: translateX(26px);
  content:"EN";
  text-align: center;
}

擬似要素 ::before に content を指定すると、その要素の中に仮想的な内容が追加されます。
この要素にJPやENを切り替えたタイミングで表示しています。

toggle.addEventListener("change", () =>
トグルスイッチを切り替えたイベントの処理です。



戻る



著作権情報
ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。