TommyDBrown,
$(function() {
var city = $(".header__city-item"),
contact = $(".contacts__item");
city.on("click", function(event) {
event.preventDefault();
var i = city.index(this);
contact.removeClass("contacts__item--active").eq(i).addClass("contacts__item--active")
})
});
|
Цитата:
<span>Ваш город: <a c="" class="header__city-link" href="#">сюда же вписывается город, или куда еще?</a></span> |
Кстати, эта хрень не нужна. И без href все нормально чакает.
Цитата:
|
Как-то я совсем с этим запутался, возникло ещё больше вопросов как это реализовать, я понимаю, что вы прекрасно понимаете, то о чем пишите, я к сожалению понимаю это отчасти, в силу узких знаний Javascript не могу написать скрипт сам. Моя изначальная реализация была мне понятней, а главное работала, правда коряво
|
Попробовал вариант рони
$(function() {
var city = $(".header__city-item"),
contact = $(".contacts__item");
city.on("click", function(event) {
event.preventDefault();
var i = city.index(this);
contact.removeClass("contacts__item--active").eq(i).addClass("contacts__item--active")
})
});
Он почему то подсвечивает не те города, которые я выбираю |
Цитата:
|
TommyDBrown,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.contacts__item--active {
background-color: #D3D3D3;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var city = $(".header__city-item"), contact = $(".contacts__item");
city.on("click", function(event) {
event.preventDefault();
var i = city.index(this);
contact.removeClass("contacts__item--active").eq(i).addClass("contacts__item--active")
})
});
</script>
</head>
<body>
<div class="header__center-inner">
<div class="header__city">
<span>Ваш город: <a class="header__city-link" href="#">выберите город</a></span>
<ul class="header__city-list">
<li class="header__city-item header__city-item--belgorod"><a href="#">Белгород</a></li>
<li class="header__city-item header__city-item--vladimir"><a href="#">Владимир</a></li>
<li class="header__city-item header__city-item--jeleznogorsk"><a href="#">Железногорск</a></li>
<li class="header__city-item header__city-item--kursk"><a href="#">Курск</a></li>
<li class="header__city-item header__city-item--orel"><a href="#">Орёл</a></li>
</ul>
</div>
<ul>
<li class="contacts__item contacts__item--belgorod">Белгород</li>
<li class="contacts__item contacts__item--vladimir">Владимир</li>
<li class="contacts__item contacts__item--jeleznogorsk">Железногорск</li>
<li class="contacts__item contacts__item--kursk">Курск</li>
<li class="contacts__item contacts__item--orel">Орёл</li>
</ul>
</div>
</body>
</html>
|
TommyDBrown,
Причем тут js. По-русски надо писать. У тебя есть список? Список всего 1 штука. В каждом элементе списка есть id. У тебя есть транслит городов, в id и записывай. Есть ссылка, по которой открывается список. Когда юзер щелкает по элементу в списке, ты получаешь всю инфу с этого элемента. Берешь id и записываешь в любой атрибут ссылки. Туда же записываешь название города. Список закрывается, дело сделано. Теперь если юзер переехал или его город разбомбил запрещенный в россии игил, он открывает список и там выделяется его город по связке тот самый атрибут - id. И вообще перехоти это делать. У тебя город уже написан в ссылке, и так понято ГДЕ он живет. Если он открыл список, ему нужен другой город. Зачем ему подсвечивать то, что и так уже видно? |
рони, нет, ТС просто всех запутал. Не так делается. Щас.
|
рони, в моем случае второй список имеет немного другую упорядоченность, извиняюсь, что ввел вас в заблуждение
<ul> <li class="contacts__item contacts__item--jeleznogorsk"></li> <li class="contacts__item contacts__item--kursk"></li> <li class="contacts__item contacts__item--orel"></li> <li class="contacts__item contacts__item--belgorod"></li> <li class="contacts__item contacts__item--vladimir"></li> </ul> |
| Часовой пояс GMT +3, время: 03:27. |