ホームページ > ウェブフロントエンド > htmlチュートリアル > ナビゲーション バー問題_html/css_WEB-ITnose

ナビゲーション バー問題_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:46:18
オリジナル
1159 人が閲覧しました

Baidu News に似ています:

初めて Baidu News に入ったとき、デフォルトでホームページが選択されました。


そして、インターネットをクリックすると、インターネットのハイパーリンクが選択されました。



このテクノロジーはどのように実装されていますか?勉強できる場所はありますか?一般的なアイデアを教えていただけますか?


ディスカッションに返信 (解決策)

調べてみると、Baidu がこれを行っていることがわかりました: 選択したタグに class=current を追加します
そして、CSS ファイルには以下が含まれます:

menu-list .current a {    color: #304E80;    border-bottom: 3px solid #3064BB;    text-decoration: none;}
ログイン後にコピー
ログイン後にコピー


これで効果は完了です ~

これは、クリックすると自分のスタイルを変更し、同時に他のすべてのスタイルを変更することを意味します。

見てみたら、これが Baidu の動作です: 選択したタグに class=current を追加します
次に、CSS ファイルには以下が含まれます:

menu-list .current a {    color: #304E80;    border-bottom: 3px solid #3064BB;    text-decoration: none;}
ログイン後にコピー
ログイン後にコピー


これでエフェクトが完成しました~


JS を使用する必要がありますか?要素の ID を取得してスタイルを変更しますか?

2 ページを作成します

1 ページ ホームページが選択されています

1 ページ インターネットが選択されています


次に、ホームページ内のインターネットをクリックして、インターネット ページにジャンプします

2 ページを作成します

1 ページのホームページが選択されています

A ページのインターネットが選択されています


次に、ホームページの [インターネット] をクリックして、インターネット ページにジャンプします


この方法はとても愚かです。

http://www.96kb.com/uploadfile/201311/6152345.zip
完全なデモをチェックしてください!百度ニュースと同じですね!

a:active


2つのページを作成します

1ページ ホームページが選択されています

1ページ インターネットが選択されています


次に、ホームページ内のインターネットをクリックして、インターネットページにジャンプします


これ この方法は本当に愚かです!

大量のトラフィックがアクセスするページは結局こうはなりません

jq を使って書くことができます マウスがインターネット上を通過したら、.current クラスと他の兄弟を追加してクラスを削除します

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート