ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery を共有して .active を動的に追加してナビゲーション効果コードを実現する例

jQuery を共有して .active を動的に追加してナビゲーション効果コードを実現する例

小云云オリジナル: 2017-12-29 11:45:442015ブラウズ

この記事では、jQuery に .active を動的に追加してナビゲーション効果を実現するための詳細なコードのアイデアを主に紹介します。必要な方はぜひ参考にしてください。

コードのアイデア:

ページ 4:

ページ 5:

コードのアイデア:

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

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

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

。。その後はありません。。。

jq コード:

$(function () {
 var li = $(".title_ul").children("li");
 for (var i = 0; i < li.length; i++) {
 var url = window.location.pathname;
 var url = 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>

jQuery を共有して .active を動的に追加してナビゲーション効果コードを実現する例

関連記事