ホームページ >ウェブフロントエンド >jsチュートリアル >ディレクトリ名をクリックして色を変更する効果の JS 実装例
ディレクトリ名をクリックして色を変更する効果の JS 実装例
- 眼眸间的深情オリジナル
- 2021-07-19 19:45:021543ブラウズ
私はいくつかの特殊効果がとても好きで、いくつかの企業 Web サイトのナビゲーションのクリック効果も気に入っていますが、クリック効果をどのように使用してもあまり理想的ではないため、この効果で問題が発生しました。 JS 関連の変更効果を学習することでそれを実現しました。これは、ディレクトリ名をクリックしてエンタープライズ Web サイトのナビゲーション バーの色を変更する効果の例です。操作コードを共有しましょう:
まず第一に、皆さんにご覧いただけるよう、最終的な効果を示します。
上の図に示すように、達成する必要がある効果は、ユーザーが対応するナビゲーション バーをクリックしたときに、対応するナビゲーション バーの名前が色を変更して、ユーザーが現在いるページを思い出させます。
次に、上記の衝突効果を実現するための HTML と JS コードを示します:
まず、フロントエンド HTML コードを示します:
<div>
<div>
<ul>
<li><a class="location now" href="{:U('Index/index')}">首页</a></li>
<li><a href="{:U('Index/product')}">产品展示</a></li>
<li><a href="{:U('Index/about')}">关于我们</a></li>
<li><a href="{:U('Index/news')}">新闻资讯</a></li>
<li><a href="{:U('Index/video')}">视频中心</a></li>
<li><a href="{:U('Index/contact')}">联系我们</a></li>
</ul>
</div>
</div> 次に、JS コードを表示しましょう:
<script type="text/javascript">
$(function () {
var url = decodeURI(location.pathname+location.search);
$(".location").each(function () {
if ($(this).attr('href') == url)
{
$(this).addClass('now')
}else {
$(this).removeClass('now')
}
})
})
</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=passwordeach(): 一致する要素ごとに指定 実行する関数を指定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 サイトの他の関連記事を参照してください。