Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.10.2009, 13:09
Новичок на форуме
Отправить личное сообщение для Bagira Посмотреть профиль Найти все сообщения от Bagira
 
Регистрация: 12.10.2009
Сообщений: 4

Динамическре изменение цвета ячейки по нажатию на ссылку
Подскажите , пожалуйста, как можно сделать, чтоб по нажатию на ссылку фон ячейки , в которой находится ссылка становился желтым (к примеру), а когда не нажата - зеленый. То есть, если нажата ссылка и нужный контент подгружен, то цвет ячейки - один, а если ссылка не активировалась - то другой.
Я делала так:
Но это это срабатывает толко при клике на ссылку, а надо, чтоб цвет ячейки был постоянным:
var last_change = null;
var last_color = null;
function ChangeColor(id, color){
   if( last_change != null ){
       last_change.style.backgroundColor = last_color;
   }
   last_change = document.getElementById(id); 
   last_color = document.getElementById(id).style.backgroundColor;
   document.getElementById(id).style.backgroundColor = color;   
}

<table id="table" border="1" bgcolor="Gray"  >
<tr>

   <td id="td1" style="background-color:gray;"><a onclick="ChangeColor( 'td1', 'yellow' )" href="?page1=1">HTML 1</a></td>

   <td id="td2" style="background-color:gray;"><a onclick="ChangeColor( 'td2', 'yellow' )" href="?page2=2">HTML 2</a></td>

   <td id="td3" style="background-color:gray;"><a onclick="ChangeColor( 'td3', 'yellow' )" href="?page3=3">HTML 3</a></td>
			    
</tr>			 
</table>
Ответить с цитированием
  #2 (permalink)  
Старый 12.10.2009, 16:32
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

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

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

Последний раз редактировалось Gozar, 12.10.2009 в 16:35.
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2009, 09:57
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Посмотрите это еще http://www.ponedelnikov.net/index.ph...op=page&pid=20
Ответить с цитированием
  #4 (permalink)  
Старый 13.10.2009, 10:46
Новичок на форуме
Отправить личное сообщение для Bagira Посмотреть профиль Найти все сообщения от Bagira
 
Регистрация: 12.10.2009
Сообщений: 4

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

По событию онлоад смотрим урл и в зависимости от него меняем цвет ячейки
Я плохо разбираюсь в js. Подозреваю что надо что-то такое сделать:
var last_change = null;
var last_color = null;
url = window._content.document.location
function ChangeColor(id, color) {
   if( last_change != null ){ 
       last_change.style.backgroundColor = last_color;
   }
   if (url == 'http://localhost/tabs/admin.php?page2=2' ) {
   last_change = document.getElementById(id); 
   last_color = document.getElementById(id).style.backgroundColor; 
   document.getElementById(id).style.backgroundColor = color;  
   }

Повесила этот код на onload в <body>, но это работает только для одной ячейки, а как определять id для всех остальных ячеек. И правильно ли я определяю url? Помогите пожалуйста, или дайте ссылку, где про это почитать. По ссылкам страницы грузятся в iframe

Последний раз редактировалось Bagira, 13.10.2009 в 12:07.
Ответить с цитированием
  #5 (permalink)  
Старый 13.10.2009, 12:09
Новичок на форуме
Отправить личное сообщение для Bagira Посмотреть профиль Найти все сообщения от Bagira
 
Регистрация: 12.10.2009
Сообщений: 4

Сделала во так, покритикуйте , пожалуйста: может урлы можно как то не так длинной передавать?
var last_change = null;
var last_color = null;

url = new String(window._content.document.location);
temp = url.split('?');

function ChangeColor(id, color) {
   if( last_change != null ){ 
       last_change.style.backgroundColor = last_color;
   }
   if ((url == 'http://localhost/tabs/admin.php?page1' && temp[1] == 'page1') ||
      (url == 'http://localhost/tabs/admin.php?page2' && temp[1] == 'page2') ||
      (url == 'http://localhost/tabs/admin.php?page' && temp[1] == 'page3')) {
   last_change = document.getElementById(id); 
   last_color = document.getElementById(id).style.backgroundColor; //alert(last_color);
   document.getElementById(id).style.backgroundColor = color;  
   } 
}


В <body> передаю так:
<body oncopy="return false" onload="ChangeColor(temp[1],'yellow');" >
<table id="table" border="1" bgcolor="Gray"  >
		     <tr>
			    <td id="page1"><a href="?page1">HTML 1</a></td>
			    <td id="page2"><a href="?page2">HTML 2</a></td>
			    <td id="page3"><a href="?page3">HTML 3</a></td>
			    
			 </tr>
</table>
</body>

Последний раз редактировалось Bagira, 13.10.2009 в 12:13.
Ответить с цитированием
  #6 (permalink)  
Старый 07.04.2011, 23:13
Новичок на форуме
Отправить личное сообщение для blackcat Посмотреть профиль Найти все сообщения от blackcat
 
Регистрация: 07.04.2011
Сообщений: 2

Спасибо! Это то, что мне было нужно!
Bagira, спасибо большое, искала информацию по похожей теме, что у Вас, только мне необходимо изменять class ячейки, Ваш скрипт очень помог! И, конечно спасибо всем, кто помог Bagira Наконец, получилось изобразить в меню то, что я хотела!
Ответить с цитированием
  #7 (permalink)  
Старый 08.04.2011, 10:46
Новичок на форуме
Отправить личное сообщение для Bagira Посмотреть профиль Найти все сообщения от Bagira
 
Регистрация: 12.10.2009
Сообщений: 4

blackcat, на здоровье! Рада, что мой вопрос Вам помог. И , конечно, спасибо всем помогавшим.
Ответить с цитированием
  #8 (permalink)  
Старый 08.04.2011, 16:54
Новичок на форуме
Отправить личное сообщение для blackcat Посмотреть профиль Найти все сообщения от blackcat
 
Регистрация: 07.04.2011
Сообщений: 2

Проблема в IE
Как хорошо, что темка ещё не умерла, дело в том что, в firefox'е всё работает на ура, а вот IE7 никак не хочет..открывает страницу с ошибкой:
'temp' - определение отсутствует в строке
<body oncopy="return false" onload="ChangeColor(temp[1],'yellow');" >
и Предполагается наличие идентификатора в строке
function ChangeColor(id, color) {
Может сталкивался кто? Что не нравится IE?

Я также пробовала добавить строку
var temp = new Array();

перед
temp = url.split('?');

но ситуация не изменилась, пока написала всё с помощью php,
но если кто даст подсказку по поводу вышеприведённого случая, буду премного благодарна!

Последний раз редактировалось blackcat, 08.04.2011 в 18:19.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное изменение ширины ячейки в таблице fed0R Элементы интерфейса 4 29.07.2009 12:50
Изменение цвета ячейки (динамическая таблица) не по событию ImSWORDMASTER Элементы интерфейса 3 12.03.2009 21:21
Изменение картинки при ховере на ссылку DImaN Общие вопросы Javascript 0 25.12.2008 12:13
Изменение изображения при наведении на ссылку MDS Общие вопросы Javascript 1 08.08.2008 21:54
Скрытие/показ изображения по нажатию на ссылку warobushek Events/DOM/Window 2 18.07.2008 15:07