Поменять цвет div в зависимости от url

Sahh

Постоялец
Регистрация
5 Апр 2014
Сообщения
169
Реакции
135
Как поменять цвет строки таблицы (Id 125) в зависимости от url адреса
HTML:
Www.site.com/Vasja?125
HTML:
<tr Id=123 class='odd'>
  <td></td>
</tr>
<tr Id=124 class='even'>
  <td></td>
</tr>
<tr Id=125 class='odd'>
  <td></td>
</tr>

Самое логичное изменить класс <tr> Но как взять значение из url?
Был бы якорь понятно нужно через hash, но здесь случай когда прокрутки страницы быть не должно.
Или я не прав и hash воспринимает не только решётку (#) в строке адреса?
Код:
<script>
var trnum = location.hash.replace('#', '');
if (trnum) {
    document.getElementById(trnum).className = "active-content";
}
</script>
если это возможно тогда как заменить '#' на '?' или на любое другое значение которое браузер не будет воспринимать якорем?

P.S. Мои познания js на уровне инфузории поэтому пожалуйста если не затруднит давайте ссылку на пример, а не только название функции.


__________________________________________________________
UPD
всем спасибо, сам разобрался. Оставлю здесь для таких страдальцев как я, код у меня получился такой:
Код:
<script>
var trnum = location.search.split('myParam=')[1]
if (trnum) {
    document.getElementById(trnum).className = "active-content";
}
</script>

Ссыллка получается вида
Код:
www.site.com/Vasja?myParam=125
дальше останется добавить css стиль для строки таблицы .active-content

Так что если вам потребуется добавлять несколько товаров на одной странице в яндекс маркет вот решение.

Буду признателен за здоровую критику и возможно более корректную правку кода.
 
Последнее редактирование:
Ну так код рабочий, почему нет?
Так бы еще сделать проверку на валидность полученного document.getElementById(trnum) значения, т.к. при указании в адресе значения, отличного от id, имеющегося на странице будет ошибка. Такое может быть, например, если пользователь выбирал строку из истории и случайно удалил/добавил пару знаков. Но это проблемы пользователя, хотя ошибки скриптов на странице некоторых раздражают )

А из будущих проблем возможно, что если понадобиться передавать больше 1 параметра, то нужно следить, чтобы myParam был последним.
Например нельзя будет писать
Код:
www.site.com/Vasja?myParam=125&some_val=foo
, а нужно будет
Код:
www.site.com/Vasja?some_val=foo&myParam=125
 
Последнее редактирование:
  • Нравится
Реакции: Sahh
Ну так код рабочий, почему нет?
А из будущих проблем возможно, что если понадобиться передавать больше 1 параметра, то нужно следить, чтобы myParam был последним.
Например нельзя будет писать Для просмотра ссылки Войди или Зарегистрируйся, а нужно будет Для просмотра ссылки Войди или Зарегистрируйся
Да это и оказались проблемы, оказывается яндекс маркет добавляет &ymclid=1234567 и &utm_source=market
и ссылка от них выглядит так
Код:
www.site.com/Vasja?myParam=125&ymclid=1234567
или так
Код:
www.site.com/Vasja?myParam=125&utm_source=market-бла-бла-бла-&ymclid=1234567
пришлось погуглить и поменять код на такой
Код:
<script>
var trnum = location.search.split('&')[0].split('=')[1]
if (trnum) {
    document.getElementById(trnum).className = "active-content";
}
</script>
то есть берется всё после = и отсекается всё после &

Не знаю какие могут ещё возникнуть проблемы с таким кодом?

А вот проверка на валидность это выше моих знаний.
 
Последнее редактирование:
Как вариант, чтобы самому не заморачиваться, то вот тут Для просмотра ссылки Войди или Зарегистрируйся, например, пишут код по разбору параметров url и подробно его описывают. Функциональность избыточна там (может списки разбирать), но может будет полезен.
А про проверку - я имел ввиду типа такого:
Код:
<script>
var trnum = location.search.split('&')[0].split('=')[1]
if (trnum) {
    elem = document.getElementById(trnum);
    if(elem) elem.className = "active-content";
}
</script>
 
  • Нравится
Реакции: Sahh
Назад
Сверху