Изменить и сохранить цвет фона на клике - PullRequest
2 голосов
/ 29 июня 2011

У меня есть следующая структура на веб-сайте, который я строю:

<tr>

        <td class="header link"><a href="x" >X</a></td>
        <td class="header link"><a href="y" >Y</a></td>
        <td class="header link"><a href="z" >Z</a></td>
        <td class="header link"><a href="w" >W</td>

</tr>

Все ячейки изначально имеют одинаковый цвет фона.

Что бы я хотел сделать, это следующее:

При нажатии любой из ссылок цвет фона ячейки, содержащей ссылку, меняется на новый и остается неизменным, пока не будет выбрана другая ссылка.

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

В настоящее время у меня работает функция наведения:

$(document).ready(function()
 {    $(function(){ $('.header').hover(function() {$(this).css('background-color', '#EBA521');},         
 function() { $(this).css('background-color', '#6F0000'); });  
 });
 }); 

Как мне выполнить вышесказанное?

Ответы [ 4 ]

1 голос
/ 29 июня 2011

Попробуйте это:

$(document).ready(function() {
        $('.header.link a').click(function() {
                $('.header.link a').css('background-color', '#6F0000');
                $(this).css('background-color', '#EBA521');
                $(this).data("bgColor", "#EBA521")
                return false;
        });
});

$(document).ready(function() {
        $(function() {
                $('.header.link a').hover(function() {
                        $(this).data("bgColor", $(this).css('background-color'));
                        $(this).css('background-color', '#EBA521');
                }, function() {
                        $(this).css('background-color', $(this).data("bgColor"));
                });
        });
});

Рабочий пример: http://jsfiddle.net/Hbgz3/2/

0 голосов
/ 29 июня 2011

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

data-value="#ffcc00"

$('.header a').click(function() {
    $('.header').css('background-color','#ffffff');
    $(this).parent().css('background-color',$(this).attr('data-value'));
});
0 голосов
/ 29 июня 2011

Вы можете использовать событие .click аналогично тому, как вы использовали функцию .hover:

$('.header').click(function(){
  //change color of this
  //change color of all other .header elements to default color
});
0 голосов
/ 29 июня 2011

Используйте обработчик щелчка вместо hover ()

$(function() {
    $("a").click( function() {
        $(".header.link").css('background-color', '#6F0000');
        $(this).parent().css('background-color', '#EBA521');
    });
});
...