Javascript-форум - Динамическре изменение цвета ячейки по нажатию на ссылку

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Динамическре изменение цвета ячейки по нажатию на ссылку (https://javascript.ru/forum/dom-window/5398-dinamicheskre-izmenenie-cveta-yachejjki-po-nazhatiyu-na-ssylku.html)

Динамическре изменение цвета ячейки по нажатию на ссылку

Подскажите , пожалуйста, как можно сделать, чтоб по нажатию на ссылку фон ячейки , в которой находится ссылка становился желтым (к примеру), а когда не нажата - зеленый. То есть, если нажата ссылка и нужный контент подгружен, то цвет ячейки - один, а если ссылка не активировалась - то другой.
Я делала так:
Но это это срабатывает толко при клике на ссылку, а надо, чтоб цвет ячейки был постоянным:

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>

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

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

Цитата:

Сообщение от Gozar (Сообщение 32283)

Я плохо разбираюсь в 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

Сделала во так, покритикуйте , пожалуйста: может урлы можно как то не так длинной передавать?

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, спасибо большое, искала информацию по похожей теме, что у Вас, только мне необходимо изменять class ячейки, Ваш скрипт очень помог! И, конечно спасибо всем, кто помог Bagira :dance: Наконец, получилось изобразить в меню то, что я хотела!

blackcat, на здоровье! Рада, что мой вопрос Вам помог. И , конечно, спасибо всем помогавшим.

Проблема в 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,
но если кто даст подсказку по поводу вышеприведённого случая, буду премного благодарна!