Активный класс переключения карт jQuery
Сайт, над которым я сейчас работаю, находится здесь (раздел карты): http://vtx.canny-creative.com/
В настоящее время у меня две проблемы:
«Активный» класс добавляется к карточке .location слева. Но мне также нужен соответствующий .dot справа, чтобы добавить к нему «active». Что я могу сделать. Тем не мение...
Что я не могу сделать, так это получить «первые загруженные / видимые» DIV, «выбранную точку», чтобы применить «активный». Таким образом, активный элемент будет применяться только при нажатии, а не «при загрузке», а затем «при щелчке», когда я их просматриваю.
$('a.dot').on('click tap', function(e) {
e.preventDefault();
$('.card').css('z-index', '0');
$('.card.active').css('z-index', '2');
$('.card').removeClass('active');
$($(this).attr('href')).addClass('active');
});.where-we-operate .card-container {
position: relative;
.card {
position: absolute;
top: 0px;
}
.active {
z-index: 4 !important;
animation: foo 0.5s ease 1;
}
}
.where-we-operate .map-container {
position: relative;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class = "where-we-operate">
<div class = "grid-container">
<div class = "grid-x grid-padding-x grid-margin-x">
<div class = "large-6 cell card-container">
<div id = "card1" class = "location-tile card">
Card Info Here
</div>
<div id = "card2" class = "location-tile card">
Card Info Here
</div>
<div id = "card3" class = "location-tile card">
Card Info Here
</div>
</div>
<div class = "large-6 cell map-container">
<a href = "#card1" class = "dot london"></a>
<a href = "#card2" class = "dot coventry"></a>
<a href = "#card3" class = "dot south-shields"></a>
<img src = "http://localhost:8888/vortex/wp-content/uploads/2018/03/uk-map.jpg" />
</div>
</div>
</div>
</section>Я создал что-то, используя скрипку jQuery здесь: https://jsfiddle.net/harishkommuri/xc8ebuf4/
К сожалению, я добавил код, над которым работаю, в свой пост. Этого достаточно?
Это похоже на довольно исчерпывающую разметку, но я заметил, что ваш JSFiddle также имеет CSS, а HTML более минимален, чем то, что вы только что добавили в свой вопрос. Является ли разметка, которую вы только что добавили, все необходимое, или только разметка из скрипта? Точно так же, если CSS в скрипте требуется для воспроизведения проблемы, его также следует добавить к вопросу.
Еще раз извините. Я отфильтровал HTML до самого необходимого и добавил, как мне кажется, единственный необходимый CSS. Однако я действительно сомневаюсь, что это имеет значение для проблемы.
Разве вы не можете просто добавить класс active в свой HTML к элементам, которые должны иметь этот класс при загрузке страницы?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я официально отвечаю на это в основном потому, что не могу выносить вопросы без ответов, но опять же, это может быть полезно для тех, кто в выходной или только начинает.
Вы можете просто добавить класс active в свой HTML-код к элементам, которые должны иметь этот класс при загрузке страницы:
<div id = "card1" class = "location-tile card active">
Другой вариант - добавить класс active с jQuery до или после вашего обработчика событий:
$('#card1').addClass('active');
Привет, вопросы, требующие помощи по отладке (или «почему мой код не выполняет X?»), Должны включать минимальный воспроизводимый пример в сам вопрос; ссылки на изолированную программную среду кода, такую как JSFiddle, недостаточно.