私はいくつかの特殊効果がとても好きで、いくつかの企業 Web サイトのナビゲーションのクリック効果も気に入っていますが、クリック効果をどのように使用してもあまり理想的ではないため、この効果で問題が発生しました。 JS 関連の変更効果を学習することでそれを実現しました。これは、ディレクトリ名をクリックしてエンタープライズ Web サイトのナビゲーション バーの色を変更する効果の例です。操作コードを共有しましょう:
まず第一に、皆さんにご覧いただけるよう、最終的な効果を示します。
上の図に示すように、達成する必要がある効果は、ユーザーが対応するナビゲーション バーをクリックしたときに、対応するナビゲーション バーの名前が色を変更して、ユーザーが現在いるページを思い出させます。
次に、上記の衝突効果を実現するための HTML と JS コードを示します:
まず、フロントエンド HTML コードを示します:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
次に、JS コードを表示しましょう:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
3. コード分析:
フロントエンド ページ:
クラス名の位置を持つ要素がラベルになります。変形した色で。
JS コード:
decodeURI(): encodeURI() 関数でエンコードされた URI をデコードできます。
location.pathname: 取得される結果は、ブラウザーのアドレス バーの完全なアドレス文字列です。
location.search: URL パスの ? と ? 以降のすべての内容が取得されます。
分析例:
アクセスされた URL パス:
http://www.zywpro.com/Home/Index/about.html?id= 1&name=wdy&password=password
location.pathname 結果は次のようになります:
http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password
location.search の結果は次のとおりです:
#?id=1&name=wdy&password=passwordeach(): 一致する要素ごとに指定 実行する関数を指定false を返すと、ループを早期に停止するために使用できます。 例:
各 li 要素のテキストを出力します:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
attr(): 選択された要素を設定または返します要素の属性値。 attr (1 つの値は選択した要素の値を返し、2 つの値は選択した要素の値を設定します)
addClass(): 追加先選択した要素 1 つ以上のクラスを追加します。
removeClass(): 選択した要素から 1 つ以上のクラスを削除します。 わかりました。色変更効果を実現するためのこのシンプルなクリック ナビゲーションが実現されました。非常にシンプルに見えますが、多くのフロントエンドの知識が必要です。物事を真剣に考えれば、物事がどれほど複雑であっても、複雑さを単純さに変えることができ、問題をより良く、より速く処理することもできます。 PHP 開発者の皆さん、これからも頑張ってください!
以上がディレクトリ名をクリックして色を変更する効果の JS 実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。