ディレクトリ名をクリックして色を変更する効果の JS 実装例-jsチュートリアル-php.cn

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

眼眸间的深情

リリース： 2021-07-21 09:25:08

オリジナル

1516 人が閲覧しました

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

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

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

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

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

<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 コードを表示しましょう:

<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 要素のテキストを出力します:

<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 サイトの他の関連記事を参照してください。