.active はナビゲーション効果を実現するために動的に使用されます-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-04-19 15:49:42

オリジナル

1981 人が閲覧しました

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