この記事では、現在のページナビゲーションのアクティベーションを実装するJavaScriptの方法について説明します。参照のためにそれを共有してください。詳細は次のとおりです。
HTMLパート(参照ナビゲーション、リンクの代わりに使用できない#テストはいくつかの新しい静的ページを作成できます)
<ul id = "nav"> <li> <a href = "/"> home </a> </li> <li> <a href = "/category/html-css/"> html/css </li> <li> <a href = "/categry/javascript/"> javascript </a> </<a href = "/category/seo/"> seo </a> </li> <li> <a href = "/category/front-end/">フロントエンドニュース</a> </li> </ul>
JavaScriptパート(.onクラスが追加された現在のページのナビゲーションを指定)
$(function(){var a1 = document.url; var a2 = $( "#nav a"); for(var i = 0; i <a2.length; i ++){if(a1.indexof($(a2 [i])。attr( "href")!= -1) {$(a2 [i])。parent()。addclass( "on"); return;}} $(a2 [0])。parent()。addclass( "on");}))CSSパート(関連する調整は、ニーズに応じて行うことができます)
#Nav Li {display:inline-block; float:left; text-align:center; height:36px; padding-left:4px; line-height:36px; background:url(images/nav.gif)no-repeat右下; li.on {font-weight:bold; background:url(images/nav.gif)no-repeat 0; margin-left:-3px;}#nav li.on a {background:url(images/nav.gif)no-repeat right 0;}この記事がみんなのJavaScriptプログラミングに役立つことを願っています。