ホームページ > ウェブフロントエンド > jsチュートリアル > ディレクトリ名をクリックして色を変更する効果の JS 実装例

ディレクトリ名をクリックして色を変更する効果の JS 実装例

眼眸间的深情
リリース: 2021-07-21 09:25:08
オリジナル
1686 人が閲覧しました

私はいくつかの特殊効果がとても好きで、いくつかの企業 Web サイトのナビゲーションのクリック効果も気に入っていますが、クリック効果をどのように使用してもあまり理想的ではないため、この効果で問題が発生しました。 JS 関連の変更効果を学習することでそれを実現しました。これは、ディレクトリ名をクリックしてエンタープライズ Web サイトのナビゲーション バーの色を変更する効果の例です。操作コードを共有しましょう:

まず第一に、皆さんにご覧いただけるよう、最終的な効果を示します。

ディレクトリ名をクリックして色を変更する効果の JS 実装例上の図に示すように、達成する必要がある効果は、ユーザーが対応するナビゲーション バーをクリックしたときに、対応するナビゲーション バーの名前が色を変更して、ユーザーが現在いるページを思い出させます。

次に、上記の衝突効果を実現するための HTML と JS コードを示します:

まず、フロントエンド HTML コードを示します:

1

2

3

4

5

6

7

8

9

10

11

12

<div>

<div>

   <ul>

       <li><a class="location now" href="{:U(&#39;Index/index&#39;)}">首页</a></li>

            <li><a  href="{:U(&#39;Index/product&#39;)}">产品展示</a></li>

            <li><a  href="{:U(&#39;Index/about&#39;)}">关于我们</a></li>

            <li><a  href="{:U(&#39;Index/news&#39;)}">新闻资讯</a></li>

            <li><a  href="{:U(&#39;Index/video&#39;)}">视频中心</a></li>

            <li><a  href="{:U(&#39;Index/contact&#39;)}">联系我们</a></li>

        </ul>

    </div>

</div>

ログイン後にコピー

次に、JS コードを表示しましょう:

1

2

3

4

5

6

7

8

9

10

11

12

13

<script type="text/javascript">

    $(function () {

        var url = decodeURI(location.pathname+location.search);

        $(".location").each(function () {

            if ($(this).attr(&#39;href&#39;) == url)

            {

                $(this).addClass(&#39;now&#39;)

            }else {

                $(this).removeClass(&#39;now&#39;)

            }

        })

    })

</script>

ログイン後にコピー

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=password

each(): 一致する要素ごとに指定 実行する関数を指定false を返すと、ループを早期に停止するために使用できます。 例:

各 li 要素のテキストを出力します:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("li").each(function(){

      alert($(this).text())

    });

  });

});

</script>

</head>

<body>

<button>输出每个列表项的值</button>

<ul>

<li>Coffee</li>

<li>Milk</li>

<li>Soda</li>

</ul>

</body>

</html>

ログイン後にコピー

attr(): 選択された要素を設定または返します要素の属性値。 attr (1 つの値は選択した要素の値を返し、2 つの値は選択した要素の値を設定します)

addClass(): 追加先選択した要素 1 つ以上のクラスを追加します。

removeClass(): 選択した要素から 1 つ以上のクラスを削除します。 わかりました。色変更効果を実現するためのこのシンプルなクリック ナビゲーションが実現されました。非常にシンプルに見えますが、多くのフロントエンドの知識が必要です。物事を真剣に考えれば、物事がどれほど複雑であっても、複雑さを単純さに変えることができ、問題をより良く、より速く処理することもできます。 PHP 開発者の皆さん、これからも頑張ってください!

以上がディレクトリ名をクリックして色を変更する効果の JS 実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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