ホームページ >ウェブフロントエンド >jsチュートリアル >.active はナビゲーション効果を実現するために動的に使用されます
.active はナビゲーション効果を実現するために動的に使用されます
- php中世界最好的语言オリジナル
- 2018-04-19 15:49:422025ブラウズ
今回は、.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 サイトの他の関連記事に注目してください。
推奨読書:
以上が.active はナビゲーション効果を実現するために動的に使用されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。