ただし、トピックが標準機能を備えた通常のサイトに関するものである場合、JavaScriptが「誤動作」することは珍しくありません。 そして、原則としてすべてが正常です...しかし、「JavaScriptがなければどうなるでしょうか？」と自問することがあります。
したがって、htmlまたはcssのみを使用して、これまたはその機能を実装するためのオプションを共有したいと思います。 おそらくあなたはすでにいくつかを見ているか、あなたのプロジェクトで使用されているかもしれませんが、ここではjsを置き換えることができるすべての有用な（そうではない）開発を集めることにしました。
すべての例は適応性があり、簡単に拡張できます。 作業のロジックは、idによってラベルに関連付けられているチェックボックスとラジオボタンに基づいています。 Idはサーバー側で生成できます。
ただし、このコードは実装の例にすぎず、ベンダープレフィックスをプロパティに追加しなかったことにすぐに注意します。
簡単な解決策から、より興味深い解決策に進みましょう。
1.タブ/タブ
ラベル-タブ。
p-テキストのコンテナ（たとえば、divに置き換えることができます）。
新しいタブを追加するには、入力+ラベル+ pタグをhtmlに追加する必要があります。
2.アコーディオン
1つの例と同じ原理で動作します。
3.モーダルウィンドウ
入力時：モーダルウィンドウは開いています：チェックされています。
これで、ドキュメント内のどこにでも、ラベル[for = zayavka]ボタンを配置でき、クリックするとモーダルウィンドウが開きます。 「Zayavka」は、モーダルウィンドウのID、またはそれを開く入力のIDです。 つまり さらに1つのモーダルウィンドウを追加するには、input + div.modalをコピーし、入力のIDとそれに関連付けられているラベルのIDを置き換える必要があります。
4.ナビゲーション/メニュー
これは、サブアイテムを持つモバイルメニューを実装するためのオプションです。 もちろん、メディアクエリを使用してデスクトップバージョンに適合させることもできます。
5.画像プレビュースライダー
スライダーのサイズとその中の画像の数は任意に設定できます。 新しい画像を追加するには、入力+（。Item> img）+ label> imgコンストラクトをコピーする必要があります（これもサーバー側で自動的に生成できます）。 最初のimgはメイン画像、2番目のimgはプレビューです。 必要に応じて、flexをinline-blockまたはfloatに置き換えることができます。
6.遅延読み込みイメージのカルーセル
カルーセルのサイズとその中の画像の数は任意に設定できます。 cssを調整して、複数の画像を連続して表示することもできます。 ここでの「遅延」ロードは、画像がdivの背景画像に書き込まれるという事実によって達成され、cssには、画面に表示されないdivのこのプロパティを中断する行があります。 その結果、ユーザーがカルーセルをめくったときにのみ画像が読み込まれます。
background-imageのdivは通常の<img>に置き換えることができますが、遅延読み込みは機能しません。 新しい画像を追加するには、htmlにタグinput + div> label + .itemを追加する必要があります。 さらに、ラベルの場合、前の画像の前に入力する必要があります（例については上記のコードを参照してください）。
まとめ
すべての例は、id要素とその番号に関連付けられていません！ つまり カルーセルまたは新しいタブタブにスライドを追加するときにcssに入る必要はありません。 Id要素は任意に設定できます-すべてが機能します！
また、たとえば、メニューのposition：stickyプロパティを設定してスクロールできる場合に、画面の上部にメニューを「貼り付ける」ことも追加します。 ただし、このプロパティはすべてのブラウザでサポートされているわけではありません 。
この記事がお役に立てば幸いです！ したがって、JavaScriptを使用せずに、サイトにさらに多くの異なる要素を実装できます。 このような実装の利点の1つは、JavaScriptをオフにしたブラウザーでの作業です（私たちの時代にこれを使用している場合）。
ご清聴ありがとうございました！