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