1

編集: # アンカーはすべて同じページにあるため、ページをリロードしない限り、JavaScript はリンクのクリックを認識しないため、問題が発生していると思われます。私はこの問題を解決する方法がわかりません... :(

クリックしたリンクが指すセクションが表示されている場合、クリックされたリンクを青色のままにしようとしています。これがコードです (このチュートリアルで提案されているように、ボディ終了タグの直前に Javascript コードを配置しました)。

HTML

<ul id="menu">
    <li><a href="#section1">section1</a></li>
    <li><a href="#section2">section2</a></li>
    <li><a href="#section3">section3</a></li>

JavaScript

links = document.getElementById("menu").getElementsByTagName("a");

for(i=0; i<links.length;i++) {
   if(links[i].href == window.location.hash) {
   links[i].className = "active";
    }
}

CSS

a.active {
    color:blue;
}

しかし、うまくいかないようです。誰でも助けることができますか？ありがとう！

4

3 に答える 3

3

アンカー タグが閉じていません。次のようになっていることを確認してください。

<a href="#section1">Link Text</a>

"終了し>、コードが欠落していることに注意してください。

また、JavaScript コードを<script>ブロックにラップしましたか?

  <script>
    all of your javascript inside of this script block
  </script>
</body>
于 2012-04-19T12:59:41.913 に答える
2

その場合、ハッシュだけでなく、hrefが絶対的である可能性があります。

   if(links[i].href == window.location.hash)
于 2012-04-19T13:01:46.700 に答える
1

おそらく、スクリプトを関数内に配置し、ヘッダーにリンクしてから、ロード時に呼び出す必要があります。

function f(){
  var links = document.getElementById("menu").getElementsByTagName("a");

  for(i=0; i<links.length;i++) {
     if(links[i].href == window.location.hash) {
     links[i].className = "active";
      }
  }
}

<body onload="f()">

var links = ...宣言の意味にも注意してください。

于 2012-04-19T13:00:02.673 に答える