1

クラス名を使用して、リンクが選択された後にリンクの色を変更しようとしています。そのため、新しい色のままですが、別のリンクが選択されるまでは元に戻ります。

この質問でMartin Koolによって投稿されたこのコードを使用しています：

<html>     
<head>
<script>
  document.onclick = function(evt) {
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == "unselected") {
      el.className = "selected";
      var siblings = el.parentNode.childNodes;
      for (var i = 0, l = siblings.length; i < l; i++) {
        var sib = siblings[i];
        if (sib != el && sib.className == "selected")
          sib.className = "unselected";
      }
    }
  }
</script>
<style>
  .selected { background: #f00; }
</style>
</head>
 <body>
   <a href="#" class="selected">One</a> 
    <a href="#" class="unselected">Two</a> 
    <a href="#" class="unselected">Three</a>
  </body>

テーブル内のリンクを外そうとするまではうまくいきます。どうしてこれなの？初心者なので安心してください。

エラーはありません。リンクは「選択済み」クラスに変更されていますが、別のリンクが選択されると、古いリンクは「未選択」に変更されるのではなく、「選択済み」クラスを保持しています。基本的に、私が知る限り、vlink 属性のように機能していますが、これは私が目指しているものではありません。

はい、リンクはすべて別のセルにあります。正しく機能するようにコードを変更する方法を教えてください。

わかりました、実際、私は話すのが早すぎました。

document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == 'unselected')
{
    var links = document.getElementsByTagName('a');
    for (var i = links.length - 1; i >= 0; i--)
    {
            if (links[i].className == 'selected')
                    links[i].className = 'unselected';
    }
    el.className = 'selected';
}

return false;
}

あなたが私にくれたこのコードは視覚的にうまく機能し、私がやりたいことを正確に実行します。ただし、リンクが機能しなくなります...色は変わりますが、何にもリンクしません。スクリプトを削除すると、正常に機能します。私は何を間違っていますか/これを機能させるには何を変更する必要がありますか?

<div>また、リンクがすべてタグで区切られた 1 つのタグ内にある、私の Web サイトの別の場所で同じことをしたいと考えてい<p>ます。どうすればこれを機能させることができますか？

4

3 に答える 3

1

あなたは兄弟をループしています。リンクが別々<td>の にある場合、それらはもはや兄弟ではありません。

次のようにすべてのリンクをループできます。

document.onclick = function(evt)
{
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == 'unselected')
    {
        var links = document.getElementsByTagName('a');
        for (var i = links.length - 1; i >= 0; i--)
        {
            if (links[i].className == 'selected')
                links[i].className = 'unselected';
        }
        el.className = 'selected';
    }

    return false;
}

また、関数の最後にa を追加してreturn false;、「#」への移動を停止しました

于 2008-11-01T21:33:03.437 に答える
0

エラーがありますか、それとも何も起こっていませんか? JavaScript の初心者である場合の最初のステップとして、Firebug などのツールを使用して詳細なエラー メッセージを表示し、console.log ステートメントを追加して、コードの実行中に何が起こっているかを確認することをお勧めします。

于 2008-11-01T21:04:49.720 に答える
0

「テーブル内」とは、各リンクを独自のセルに配置することを意味しますか? これにより、次の行が作成されるためです。

var siblings = el.parentNode.childNodes;

セル外の他のリンクを選択できません。どの要素がリンク コンテナであるかを知らせる別の方法を見つける必要があります。

于 2008-11-01T21:09:01.457 に答える