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

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

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

<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>. Как я могу заставить это работать?


html-table scripting hyperlink
person Community    schedule 01.11.2008    source источник
comment
Пожалуйста, разместите свой код с таблицами.   -  person vaske    schedule 01.11.2008

Ответы (3)


arrow_upward
1
arrow_downward

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

person Greg    schedule 01.11.2008

arrow_upward
0
arrow_downward

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

person lacker    schedule 01.11.2008

arrow_upward
0
arrow_downward

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

var siblings = el.parentNode.childNodes;

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

person bobince    schedule 01.11.2008