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

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

1 голос
/ 01 ноября 2008

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

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

<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, вместо того, чтобы переходить в невыбранный. На самом деле, насколько я могу судить, он работает как атрибут 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>. Как я могу сделать эту работу?

Ответы [ 3 ]

1 голос
/ 02 ноября 2008

Вы проходите через братьев и сестер. Если ссылки в отдельных <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; в конце функции, чтобы вы не набрали '#'

0 голосов
/ 02 ноября 2008

Под "в таблицах" вы подразумеваете размещение каждой ссылки в отдельной ячейке? Потому что это сделало бы эту строку: 

var siblings = el.parentNode.childNodes;

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

0 голосов
/ 02 ноября 2008

Есть ошибка или просто ничего не происходит? Хороший первый шаг, если вы новичок в javascript - это использовать такой инструмент, как Firebug, чтобы видеть подробные сообщения об ошибках и добавлять операторы console.log, чтобы увидеть, что происходит во время выполнения кода.

...