コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JSでナビゲーションバーのホバー効果を実装する(続き2)_javascriptスキル

JSでナビゲーションバーのホバー効果を実装する(続き2)_javascriptスキル

WBOY
リリース： 2016-05-16 17:21:31
オリジナル
1216 人が閲覧しました

[JS 実装ナビゲーション バー ホバー]
[JS 実装ナビゲーション バー ホバー (続き)]

このページを Jquery で書き換えた後、元のメソッドにはまだいくつかの問題があります:

1. まず第一に、Js コードが冗長であり、ナビゲーション バーのタブはハイパーリンクの代わりに js を使用してジャンプを実装します。ナビゲーションバー自体は固定で配置されていますが、水平方向の中央に設定されておらず、代わりに JS で左側の値が中央に配置されるように変更されます。

問題 2 では、ブラウザ ウィンドウのサイズが変更されると、ブラウザ内の div の位置が変更され、ページ内の div を介して固定 div を動的に修正できなくなります。ナビゲーション バーを使用して検索します。

最終的なコード変更は次のとおりです。

test.html


コードをコピーコードは次のとおりです:




著者別の最新記事
最新の問題
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
ナビゲーションバーの下枠のCSS ナビゲーション バーがあり、リスト内の項目にカーソルを置くと下部に赤い線を追加しましたが、その赤い線をタイトル (例: 「サービス」) の下に移動したいのですが、これを実現する方法...
から 2024-04-06 15:04:41
0
2
347
Vueでルートプロパティを設定する方法はありますか? ページ内の特定のタブ this.$router.push({name:"AdminNotifications",params:{tab:"reques...
から 2024-04-06 11:35:59
0
1
456
React Router のネストされたルーティングと検索パラメーターの使用 ネストされた React ルートで検索パラメーターを使用する場合、/app 上で、/app/user に移動するリンクをクリックした後、ナビゲーションが機能しません。ネストせずに試...
から 2024-04-05 13:48:33
0
1
1475
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート