Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.77/13: Рейтинг темы: голосов - 13, средняя оценка - 4.77
Лучше не лучше, но лучше.
 Аватар для BlacKCheT
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422

Появление блока по клику

02.01.2019, 22:05. Показов 2729. Ответов 10

Студворк — интернет-сервис помощи студентам
JavaScript
1
2
3
4
5
6
7
$(document).ready(function() { // Ждём загрузки страницы
 
$(".cart__open").click(function() {
     $(".cart").css('display', 'block');
});
    
});
Появляется и пропадает сразу... Почему?
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
02.01.2019, 22:05
Ответы с готовыми решениями:

Появление блока
Добрый день, Есть вот такой вот блок <div class="div1"> <textarea class="tex"></textarea> ...

Появление блока
При наведении курсора мышки на один из элементов - три блока становятся прозрачными, при отведении - видимыми . В моем случае : если...

Плавное появление блока
Как сделать плавное появление блока как на сайте dns? https://www.dns-shop.ru/catalog/17a8e9b716404e77/bytovaya-texnika/. Там когда...

10
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
03.01.2019, 08:27
Цитата Сообщение от BlacKCheT Посмотреть сообщение
Появляется и пропадает сразу
нее... все в норме -> https://codepen.io/Mr_Sergo/pen/OrzYGZ
0
Лучше не лучше, но лучше.
 Аватар для BlacKCheT
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422
03.01.2019, 11:20  [ТС]
HTML5
1
2
3
4
5
6
7
8
9
10
11
        <div class="container">
        <div class="cart__img"><p class="cart__name">Корзина</p><a href="" class="cart__open"><img src="../back/cart/img/Cart.png" alt="cart"></a></div>
   <div class="cart">
    <div class="cart__header">
       <h3>Корзина покупок</h3>
       <div class="close__cart">X</div>
        </div>
       <div class="goods">ВЫВОД ТОВАРОВ</div>
       <button>Перейти к оплате</button><button class="cart__close">Вернуться на сайт</button>
       </div>
      </div>
Добавлено через 53 секунды
Извиняюсь за неполный контент.. Сие проблема имеется.
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
03.01.2019, 11:50
Лучший ответ Сообщение было отмечено BlacKCheT как решение

Решение

BlacKCheT,
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
        <div class="cart__img"><p class="cart__name">Корзина</p><img src="https://www.cyberforum.ru/back/cart/img/Cart.png" class="cart__open" alt="cart"></div>
   <div class="cart">
    <div class="cart__header">
       <h3>Корзина покупок</h3>
       <div class="close__cart">X</div>
        </div>
       <div class="goods">ВЫВОД ТОВАРОВ</div>
       <button>Перейти к оплате</button><button class="cart__close">Вернуться на сайт</button>
       </div>
      </div>
Потому что ваш img находится в теге <a>
1
Лучше не лучше, но лучше.
 Аватар для BlacKCheT
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422
03.01.2019, 11:52  [ТС]
Странно очень, благодарю.
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
03.01.2019, 11:52
Вот -> https://codepen.io/Mr_Sergo/pen/KbQKow
0
Лучше не лучше, но лучше.
 Аватар для BlacKCheT
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422
03.01.2019, 11:52  [ТС]
Никогда не сталкивался с таким.
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
03.01.2019, 12:00
Цитата Сообщение от BlacKCheT Посмотреть сообщение
Никогда не сталкивался с таким.
Объясняю "на пальцах"... кликнув по такой надписи:
HTML5
1
<a href="" >Ссылка в никуда</a>
Вот она в действии -> https://codepen.io/Mr_Sergo/pen/gZvOKZ
Произойдет перезагрузка страницы. Код отработает как положено но с перезагрузкой страницы. В вашем случае нужно либо отменять ее стандартное поведение вот так:
HTML5
1
<a href="" class="cart__open" onclick="return false;"><img src="https://www.cyberforum.ru/back/cart/img/Cart.png" alt="cart"></a>
либо по-просту ее убрать а класс перенести в img, ну если конечно же это не нарушит работу остального кода.
0
Лучше не лучше, но лучше.
 Аватар для BlacKCheT
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422
03.01.2019, 12:14  [ТС]
Понял, чет затупил. Подумав что сделал правильно, указав класс в ссылку..
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
03.01.2019, 12:19
Цитата Сообщение от BlacKCheT Посмотреть сообщение
указав класс в ссылку
Вы не поняли, класс в ссылке это правильно вы сделали. Но если вам нужно что бы при клике на ссылку отрабатывал какой-то код, то просто необходимо прописать ей аттрибут onclick="return false;" --- тогда при клике на ссылку не будет происходить перезагрузки страницы и код JS сможет отработать нормально.

Добавлено через 51 секунду
В конечном итоге ссылка должна выглядеть так:
HTML5
1
<a href="" class="cart__open" onclick="return false;"><img src="https://www.cyberforum.ru/back/cart/img/Cart.png" alt="cart"></a>
1
Лучше не лучше, но лучше.
 Аватар для BlacKCheT
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422
03.01.2019, 22:24  [ТС]
А..

Добавлено через 50 секунд
Благодарю за объяснение..
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
03.01.2019, 22:24
Помогаю со студенческими работами здесь

Картинку по клику делать фоном блока
Здравствуйте. Задача: Создайте div размерами ширина – 100%, высота 250px. Ниже добавьте 4-5 изображений с одинаковыми классами, разного...

Появление блока при наведении мыши на другой блок
Добрый день есть span у него есть класс, необходимо чтобы при наведении на него курсора мыши появлялся небольшой блок. Сделал кое что но...

Появление и исчезновение блоков по клику
&lt;script type=&quot;text/javascript&quot;&gt; function(){ var link = document.getElementById(&quot;butt&quot;); link.onclick = function (){ ...

Пропажа/ Появление блока
Есть код &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;div name=&quot;block1&quot;&gt; &lt;h1&gt;Ведите пароль&lt;/h1&gt; &lt;input type=&quot;text&quot;&gt; ...

Появление и исчезновение блока со счетчиком
Добрый день, подскажите, кто знаком, как реализовать на javascript или jquery следующий функционал. Есть лендинг, при скроле к определенным...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
Перемещение выделенных строк ТЧ из одного документа в другой
Maks 30.03.2026
Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
Functional First Web Framework Suave
DevAlt 30.03.2026
Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа
Maks 29.03.2026
Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .
Настройка движения справочника по регистру сведений
Maks 29.03.2026
Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника
Maks 27.03.2026
Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний.
Hrethgir 26.03.2026
Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа
Maks 26.03.2026
Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .
Команды формы и диалоговое окно
Maks 26.03.2026
1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru