外部HTMLからnavbarをロードし、現在のアンカークラスをアクティブに設定する

外部HTMLファイルからナビゲーションバーをロードしようとしていて、現在のページに基づいてアンカーのタグクラスを自動的に「アクティブ」に設定しようとしています。外部HTMLからnavbarをロードし、現在のアンカークラスをアクティブに設定する

<html> 
<head> 
    <title>Main</title> 

    <style> 
     .active { 
      background-color: green; 
     } 
    </style> 

    <script> 
     $(document).ready(loadAndSet()); 

     function loadAndSet() { 
      loadBar(); 
      setActive(); 
     } 

     function loadBar() { 
      $('#bar').load('navigation.html'); 
     } 

     function setActive() { 
      var aObjects = document.getElementById("bar").getElementsByTagName("a"); 

      for (var i = 0; i < aObjects.length; i++) { 
       if (document.location.href.indexOf(aObjects[i].href) >= 0) { 
        aObjects[i].className = "active"; 
       } 
      } 
     } 
    </script> 
</head> 

<body> 
    <div id="bar"></div> 
    <h1>Content Title</h1> 
    <p>Some content</p> 
</body> 
</html>

そして、ここではnavigation.htmlです：私は間違って

<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="page2.html">Page 2</a></li> 
</ul>

何をやっている

ここでは、コードですか？

EDIT：

新コード：

<html> 
<head> 
    <title>Main</title> 

    <style> 
     .active { 
      background-color: green; 
     } 
    </style> 

    <script> 
     $(document).ready(loadBar()); 

     function loadBar() { 
      $('#bar').load('navigation.html', setActive); 
     } 

     function setActive() { 
      $("#home").addClass("active"); 
     } 
    </script> 
</head> 

<body> 
    <div id="bar"></div> 
    <h1>Content Title</h1> 
    <p>Some content</p> 
</body> 
</html>

そしてnavigation.html：

<ul> 
<li><a id="home" href="index.html">Home</a></li> 
<li><a id="page2" href="page2.html">Page 2</a></li> 
</ul>

ナビゲーションバーも...

出典

2016-04-03 Sanac

を使用してみてください：$（ドキュメント）.ready（loadBar）。単に関数loadBarを渡し、実行しないでください。あなたのコードでは、loadBarをただちに実行していて、その戻り値を渡します。これは 'unedefined'です。 –

あなたのナビゲーションをロードしません。 htmlコードに閉じるul-Tagがありません：最後の<ul>を</ul>に変更してください。

第2の問題はもう少し困難です。ページindex.htmlは、document.location.hrefに複数の異なる値を持つことができます！

それはすることができ：

http://www.stackoverflow.com/index.html

または

http://www.stackoverflow.com/

あるいは

http://www.stackoverflow.com

あなたのコードは、のために働きません最後の2つのバージョンのURL。

第3の問題は、load（）関数が数秒かかることがあるため、setActive（）の実行時にコードがロードされないことです。ロードが完了するまで待つ必要があります。これを実現するには、コールバック関数を使用します：

$(document).ready(loadBar()); 

function loadBar() { 
    $('#bar').load('navigation.html', setActive); 
} 

function setActive() { 
    var aObjects = document.getElementById("bar").getElementsByTagName("a"); 

    for (var i = 0; i < aObjects.length; i++) { 
     if (document.location.href.indexOf(aObjects[i].href) >= 0) { 
      aObjects[i].className = "active"; 
     } 
    } 
}

出典

2016-04-03 18:34:37 sepiott

コードを編集しましたが、それでも動作しません。ナビゲーションバーは何らかの理由でロードされません。私は手動でindex.htmlに行きます。 – Sanac

ブラウザのデベロッパーツールでJavaScriptエラーを確認できますか？ – sepiott

..."Uncaught ReferenceError：$が定義されていません" – Sanac

すべてのリンクに一意のIDを与え、すべてのサイトの最後にこの小さなjavascriptを使用できます。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#IFOFYOURLINK").addClass("active"); 
    }); 
</script>

EDIT：これはあなたが探しているものである

function loadBar() { 
    $('#bar').load("navigation.html", setActive); 
}

出典

2016-04-03 18:40:46 DestinatioN

Navbarを手動で挿入しても私の前のコードが動作していなかったので、Navbarがロードされると、それは良くなるはずです。 – Sanac

私の答えは多分助けてくれます – DestinatioN

外部HTMLからnavbarをロードし、現在のアンカークラスをアクティブに設定する

答えて

関連する問題