1. ナビゲーション バーを http://chuangzaoshi.com/code の左側のようにするにはどうすればよいですか? 2. CSSを使って完全に実現できるのでしょうか？純粋なCSSを実装するにはどうすればよいですか? jsを実装するにはどうすればよいですか? ＃＃＃ありがとう！
リーリー
どのエフェクトのことを指しますか? :hover 逆、それほど複雑なことはありません。 すでに自分で例を示しているので、そのコードを開いて比較するだけです。 特定のスタイルや効果がわからない場合は、さらに詳細を尋ねることができます。 全体を実装する方法を直接尋ねるには広すぎる 実装例を示しましたか？ cssとjsは示されているので、直接参照できます。
新しく追加された質問に基づく
左側のナビゲーションでデザインなどの大きなラベルをクリックすると、元のラベルが自動的に折りたたまれ、現在のULがポップアップ表示され、右側のコンテンツがそれに応じて変更されます。
大きなラベルをクリックするたびに、実際にはすべての大きなラベルの下にある ul がデフォルトで閉じていることがわかります。 その後、現在のページによると、現在の大きなラベルにはアクティブなクラス名があり、開きたいULがそれに続くことがわかります。つまり、簡単です:
CSSメソッドは.active + ul { display:block; }
.active + ul { display:block; }
jqueryメソッドは$('.active').next('ul').css('display','block');
$('.active').next('ul').css('display','block');
他のメソッドも同様で、アクティブなアクティビティ タグを取得し、その下に表示する小さなタグ リストを示します。 いただいた例によると、cssで書かれているのではなくstyle属性に挿入されているのでjsで実装する必要があります。
マウスをその上に移動したときに変色効果が必要ですか?
CSSで実装する場合は、左側のリストを使用してからスタイルを変更し、:hover疑似クラスを使用してマウスを移動するスタイルに合わせますたとえば
:hover
JSで実装する場合は、対応する要素のマウス入力イベントを監視する必要がありますonmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleave マウスが離れると、マウスが通過したときに設定されたスタイルを通常のスタイルに戻す必要があります。
onmouseenter
onmouseleave
次回初めて質問するときは、問題の詳細を明確に説明することをお勧めします。そうしないと、回答者の時間が無駄になります。
後ほどいただいたご質問に対して、
左側のHTMLレイアウトはおそらくこんな感じです
次に、上記のように、白くなったものの上にマウスを移動します。 クリックすると、クリックした <li> に .active などの CSS クラスを追加してから、前の <li>加上一个CSS类，比如.active，然后，加上之前的:hover を追加します。CSS は次のようになります。
<li>
.active
もちろん、この例では現在のラベルとマウスオーバーのスタイルは同じなので、ul li:hover和ul li.activeを組み合わせて
ul li:hover
ul li.active
このようにすると、タブを切り替えることができなくなります。右側の HTML レイアウトは次のようになります。 リーリー
クラスの表示にはCSSが使用されます。それ以外の場合は非表示になります。 #main中第一个子p显示出来，将其他的隐藏，建议也给p加上.active类，有.active リーリー
#main
p
ネイティブの記述例: リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
どのエフェクトのことを指しますか? :hover 逆、それほど複雑なことはありません。
すでに自分で例を示しているので、そのコードを開いて比較するだけです。
特定のスタイルや効果がわからない場合は、さらに詳細を尋ねることができます。
全体を実装する方法を直接尋ねるには広すぎる
実装例を示しましたか？ cssとjsは示されているので、直接参照できます。
新しく追加された質問に基づく
大きなラベルをクリックするたびに、実際にはすべての大きなラベルの下にある ul がデフォルトで閉じていることがわかります。
その後、現在のページによると、現在の大きなラベルにはアクティブなクラス名があり、開きたいULがそれに続くことがわかります。つまり、簡単です:
CSSメソッドは
.active + ul { display:block; }jqueryメソッドは
$('.active').next('ul').css('display','block');他のメソッドも同様で、アクティブなアクティビティ タグを取得し、その下に表示する小さなタグ リストを示します。
いただいた例によると、cssで書かれているのではなくstyle属性に挿入されているのでjsで実装する必要があります。
マウスをその上に移動したときに変色効果が必要ですか?
リーリーCSSで実装する場合は、左側のリストを使用してからスタイルを変更し、
:hover疑似クラスを使用してマウスを移動するスタイルに合わせますたとえば
JSで実装する場合は、対応する要素のマウス入力イベントを監視する必要があります
onmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleaveマウスが離れると、マウスが通過したときに設定されたスタイルを通常のスタイルに戻す必要があります。アップデート
次回初めて質問するときは、問題の詳細を明確に説明することをお勧めします。そうしないと、回答者の時間が無駄になります。
後ほどいただいたご質問に対して、
左側のHTMLレイアウトはおそらくこんな感じです
リーリー次に、上記のように、白くなったものの上にマウスを移動します。
リーリークリックすると、クリックした
<li>に.activeなどの CSS クラスを追加してから、前の<li>加上一个CSS类，比如.active，然后，加上之前的:hoverを追加します。CSS は次のようになります。もちろん、この例では現在のラベルとマウスオーバーのスタイルは同じなので、
と書くこともできます リーリーul li:hover和ul li.activeを組み合わせてこのようにすると、タブを切り替えることができなくなります。右側の HTML レイアウトは次のようになります。 リーリー
デフォルトでは、クラスの表示にはCSSが使用されます。それ以外の場合は非表示になります。
次に、JS イベントを記述しますが、ネイティブの方が記述が面倒なので、jQuery を使用して操作することをお勧めします。#main中第一个子p显示出来，将其他的隐藏，建议也给p加上.active类，有.activeリーリーネイティブの記述例:
jQuery ライブラリを使用すると、次のようにより簡単になります:リーリー
リーリー
結論
これでかなり説明がつきましたが、非常に衝撃的なニュースをお伝えしたいと思います。つまり、あなたが挙げたサンプル Web サイトではこれがまったく行われない可能性があります。この Web サイトには 4 つのページがあり、リンクを通じて相互にジャンプできます。各ページの現在のページのラベルは常に点灯しています。 (ソースコードを注意深く見ていませんでしたが、異なる URL アドレスに基づいてルーティングされているかどうかはわかりませんでした。そのため、「おそらく」とだけ述べました)。