ジュニアフロントエンドの開(kāi)発者がJavaScriptを?qū)W習(xí)するとき、スイッチングクラス名をマスターすることは高速で効果的なテクニックです。

 const button = document.queryselector（ "。my-button"）;
const element = document.queryselector（ "。content"）;

button.addeventlistener（ "click"、function（）{
  element.classlist.toggle（ "Sparkles"）;
}）;

このトリックを使用して、タブを作成できます。

簡(jiǎn)単な実裝

クラス名を切り替えるスキルを習(xí)得した場(chǎng)合、タブインターフェイスを構(gòu)築する必要があります。コードを追加してクリックイベントを処理して、次のような単純なタブを?qū)g裝します。

これらのタブは完全に利用可能です。アンカーリンクを使用して、リンクとタブ領(lǐng)域の間にジャンプリンクを作成しますが、これは意味的に合理的です。タブにはキーボードからアクセスでき、フォーカススタイルがあり、リターンキーを使用してアクティブ化できます。

しかし、これで十分ですか？完璧なタブ？

簡(jiǎn)単ではありません

問(wèn)題は、キーボード処理のために特別な治療を行わないことであり、タブインターフェイスにはキーボード処理が必要になる場(chǎng)合があります。ヘイドンピカリングはこれを説明しています：

同じページへのリンクとは異なり、タブはユーザーを関連するコンテンツ領(lǐng)域/パネルに移動(dòng)しません。コンテンツを視覚的に表示するだけです。これは、毎回ページの上部に戻ることなく異なる領(lǐng)域を切り替えたいユーザー（スクリーンリーダーを使用する人を含む）に有益です。

これにより、不幸な副作用がもたらされます。ユーザーがキーボードを介してエリアに移動(dòng)し、內(nèi)部コンテンツと対話(huà)したい場(chǎng)合、焦點(diǎn)を合わせて配置された現(xiàn)在のタブの右側(cè)にすべてのタブを順次通過(guò)する必要があります。

タブインターフェイスで考慮すべき他の多くの動(dòng)作的な側(cè)面があることがわかります。 Heydonの説明では、 TABキーは、タブ自體からそのタブに関連するものにジャンプする方法として実際に使用でき、焦點(diǎn)を移動(dòng)できます。シフトタブはフォーカスを戻します。次に、矢印キーを使用してタブを変更します。これらすべてには、より多くのJavaScript、さらにはFocus Stateを許可するためにHTMLが必要です。

最終結(jié)果は次のとおりです。

質(zhì)問(wèn)は次のとおりです。クラス名をWebに有害に切り替えるスキルは、これらの側(cè)面を考慮していないためですか？基本的なツールを使用すると、Webのアクセシビリティが損なわれますか？わからない。この問(wèn)題は私には大きすぎます。ただし、これは考える価値のある質(zhì)問(wèn)です。

筋肉の記憶

誰(shuí)も私たちをそうすることで私たちを批判していない限り、最初に最初のデモのようなタブを書(shū)くことを?qū)Wぶ場(chǎng)合、何度も何度も使用します。何度もやったので、デモを約3分で書(shū)きました。これらのタブを作成することは、間違いなく私の筋肉の記憶の一部です。

多くの人々は、JavaScriptフレームワークがウェブ上の慘劇だと考えています。なぜなら、彼らは最?lèi)櫎违ⅴ互伐鹰辚匹￥螘r(shí)代をリードしているように見(jiàn)えるからです。しかし、タブを構(gòu)築する筋肉の記憶が事前に構(gòu)築されたタブUIを使用する場(chǎng)合、それはすべての適切な機(jī)能をもたらし、主にスタイルを殘しますか？

これは、Reach UIタブです（React ...を使用すると仮定します...）。

無(wú)料のタブを取得するためにプロジェクトを切り替えるように求めているわけではありませんが、Reactはすでに巨大です。このような良いモードが事実上の選択になる場(chǎng)合、その効果はアクセシビリティに対する純利益になる可能性があります。少なくとも私にとっては可能です。 359回目の間、タブインターフェイスを手動(dòng)で書(shū)くことができなくなる可能性があります。

以上がタブ：IT＆＃039; s Clumplicted?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。