コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

ナビゲーションバー背景切り替えのjQuery実装例effect_jquery

WBOY
リリース： 2016-05-16 17:23:25
オリジナル
1100 人が閲覧しました

結果例：
ナビゲーションバー背景切り替えのjQuery実装例effect_jquery

复制代代码如下:



<頭>



.nav{高さ:40px; width: 100%;background: #E6E6E6;}
.nav ul li{float: left;list-style: none;margin-right: 20px;line-height: 40px;}
.nav ul li a {テキスト装飾: なし;表示: ブロック;幅: 60px; text-align:center;}
.onNav{font-weight:bold;color:#fff;背景: #ccc;}










js 部分：
复制代码代码如下:

<スクリプトタイプ="text/javascript">
$(".nav ul li a").click(function(){if($(this).has(".onNav")){ //标签追加クリックイベントに到達、背景が存在するかどうかを判断
$(this).addClass("onNav").parent("li").siblings("li").find("a").removeClass("onNav");}}) // 追加类并移除已有的类


上は 1 つの方法、以下は別の方法です:
复制代 代価次のとおりです。

🎜>
関連ラベル：
ナビゲーションバー
ソース：php.cn
前の記事：jQuery_jquery の .attr() と .prop() の問題に関するディスカッション 次の記事：jquery は、シミュレートされた events_jquery を使用してバブリング イベントを防止します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして 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
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート