Изменение цвета выбранной ссылки, встроенной в таблицу

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

  •  05-07-2019
  •  | 
  •  

Вопрос

Я пытаюсь использовать имена классов, чтобы изменить цвет ссылки после того, как она была выбрана, чтобы она оставалась новым цветом, но только до тех пор, пока не будет выбрана другая ссылка, и затем она изменится обратно.

Я использую этот код, который был размещен Мартином Кулом в этот вопрос: 

<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>

Он работает нормально, пока я не попытаюсь вывести ссылки в таблице. Почему это? Будь легким, я новичок.

<Ч>

Ошибок нет, ссылки меняются на " selected " класс, но при выборе другой ссылки старые ссылки сохраняют " selected " вместо " unselected " ;. На самом деле, насколько я могу судить, он работает как атрибут 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, чтобы видеть, что происходит во время выполнения кода.

По & # 8216; в таблицах & # 8217; Вы хотите поместить каждую ссылку в свою ячейку? Потому что это сделало бы эту строку: 

var siblings = el.parentNode.childNodes;

не удается выбрать другие ссылки за пределами ячейки. Вам нужно будет найти другой способ указать, какой элемент является контейнером ссылок.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top