javascriptは現在のページナビゲーションのアクティブ化を実現する方法です.

1563 ワード

本論文の実例は、javascriptが現在のページナビゲーションのアクティブ化を実現する方法を述べている.皆さんの参考にしてください.具体的には以下の通りです
html部分(参照のナビゲータは、リンクの代わりに、テストでいくつかの静的ページを新規作成できます.)

  • 最初のページ
  • HTML/CSS
  • JavaScript
  • SEO
  • ニュース
  • 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 right bottom;
    }
    #nav li a{
    display:block;
    color:#777;
    padding:0 15px 0 10px;
    }
    #nav li.on{
    font-weight:bold;
    background:url(images/nav.gif) no-repeat 0 0;
    margin-left:-3px;
    }
    #nav li.on a{
    background:url(images/nav.gif) no-repeat right 0;
    }
    本論文で述べたように、皆さんのjavascriptプログラムの設計に役に立ちます.