테이블에 포함 된 선택한 링크의 색상 변경

StackOverflow https://stackoverflow.com/questions/256093

  •  05-07-2019
  •  | 
  •  

문제

클래스 이름을 사용하여 링크가 선택된 후 링크의 색상을 변경하려고 노력하여 새 색상으로 유지되지만 다른 링크가 선택 될 때까지만 다시 변경됩니다.

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> 분리 된 태그 <p> 태그. 이 작업을 어떻게 만들 수 있습니까?

도움이 되었습니까?

해결책

당신은 형제를 통해 반복하고 있습니다. 링크가 별도 인 경우 <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;
}

나는 또한 추가했다 return false; 당신이 '#'로 이동하는 것을 막기 위해 기능의 끝에

다른 팁

오류가 있거나 아무 일도 일어나지 않습니까? JavaScript 초보자 인 경우 좋은 첫 단계는 FireBug와 같은 도구를 사용하여 자세한 오류 메시지를 표시하고 Console.log 문을 추가하여 코드를 실행하는 동안 무슨 일이 일어나고 있는지 확인할 수 있습니다.

'in tables'에 의해 각 링크를 자체 셀에 넣는 것을 의미합니까? 그것은이 줄을 만들기 때문에 :

var siblings = el.parentNode.childNodes;

셀 외부의 다른 링크를 선택하지 못합니다. 어떤 요소가 링크 컨테이너인지 알리는 다른 방법을 찾아야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top