.active はナビゲーション効果を実現するために動的に使用されます

php中世界最好的语言
リリース: 2018-04-19 15:49:42
オリジナル
1986 人が閲覧しました

今回は、.active を動的に使用することによるナビゲーション の効果について説明します。ナビゲーション効果を実現するために .active を動的に使用する場合の注意事項 について説明します。

jq window.location.pathname;を通して開いたページへのリンクを取得します

HTML の li に ID を追加します。ID の名前は、URL リンクの href と同じです

。 jq include メソッドを通じて対応する li を見つけて、それにアクティブなクラス名を追加します

それから。 。その後はありません。 。 。

jqコード:

$(function() {
 varli = $(".title_ul").children("li");
 for(vari = 0; i < li.length; i++) {
 varurl = window.location.pathname;
 varurl = url.replace("/","");
 if(url.indexOf(li[i].id)!=-1) {
  li[i].firstChild.className ="active";
 
 }else{
  li[i].firstChild.className ="";
 }
 }
})
ログイン後にコピー

HTML コード:

<body>
<p class="title">
 <ul class="title_ul">
 <li id="index"><a href="index.html"rel="external nofollow"class="">页面1</a></li>
 <li id="zf"><a href="zf.html"rel="external nofollow"class="">页面2</a></li>
 <li id="gc"><a href="gc.html"rel="external nofollow"class="">页面3</a></li>
 <li id="hc"><a href="hc.html"rel="external nofollow"class="">页面4</a></li>
 <li id="shwt"><a href="shwt.html"rel="external nofollow"class="">页面5</a></li>
 </ul>
</p>
</body>
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQueryでマウスホイール操作で画像をズーム

jQueryでトップに戻る機能を実装

以上が.active はナビゲーション効果を実現するために動的に使用されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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