<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Скрытый текст на JavaScript

Скрытый текст на JavaScript

Описание: Бывают ситуации, когда не хочется выводить весь контент страницы сразу. Например, в разделе "FAQ" вывести только названия вопросов. А если человека заинтересует ответ на определённый вопрос, то он может открыть ответ, а когда просмотрит, то и закрыть. Это создаёт удобство страницы и её компактность. И для этого я подготовил простенький скрипт на JavaScript, позволяющий открыть, либо скрыть определённый текст (в общем случае, определённые элементы), то есть сделать скрытый текст на JavaScript.

Результат: Кликните мышкой по названию вопроса. Если Вы кликните ещё раз, то ответ вновь закроется.

Вопрос №1

Вопрос №2

Код JavaScript (вставлять между тегами <head> и </head>):

<script language="JavaScript">
function expandit(id){
  obj = document.getElementById(id);
  if (obj.style.display=="none") obj.style.display="";
  else obj.style.display="none";
}
</script>

Код HTML (вставлять между тегами <body> и </body>):

<h4 style="cursor:pointer;" onClick="expandit('ans1')">Вопрос №1</h4>
<div id = "ans1" style="display:none">Ответ №1.</div>
<h4 style="cursor:pointer;" onClick="expandit('ans2')">Вопрос №2</h4>
<div id = "ans2" style="display:none">Ответ №2.</div>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (42):

armen_98 armen_98 23.02.2011 13:12:41

Хорошая статья.Мне понравилось.Спасибо админу!

Ответить

Alim_(I) Alim_(I) 01.05.2011 11:11:49

Странно =), Вы раньше объесняли все теги нам в HTML. Конкретно все, а щас только одни таблицы... =О

Ответить

Admin Admin 01.05.2011 12:20:12

Во-первых, не все, а только действительно необходимые. А, во-вторых, где Вы в данной статье видите таблицы?

Ответить

Alim_(I) Alim_(I) 01.05.2011 21:06:55

Под таблицами я имел ввиду показы. Ну в HTML Вы нам все теги объесняли, какой тег какое действие выполняет.

Ответить

Admin Admin 01.05.2011 23:47:21

Цель данной категории (Скрипты на JavaScript) предоставить готовые скрипты с кратким описанием, демонстрацией результата и кода. А обучение JavaScript и HTML происходит в других категориях.

Ответить

Alim_(I) Alim_(I) 02.05.2011 11:42:13

А как делать, чтобы сущществовал данный адрес, когда уже зарегистрировал сайт. Например чтобы сущществовал http://mail.ru/vazhnayainformaciya? У меня проблемы с меню можете чем-то помочь?

Ответить

Admin Admin 02.05.2011 11:45:09

Чтобы страница существовала, необходимо её создать. Поэтому создайте папку vaznayainformaciya в корне сайта, и расположите в ней index.html.

Ответить

Alim_(I) Alim_(I) 02.05.2011 13:35:06

Вы не так поняли мой вопрос, я имел ввиду ну сущществует www.myrusakov.ru как зделать так чтобы нажал на один раздел из меню. И открылось новое окно например http://myrusakov.ru/skrytyj-tekst-javascript.html.

Ответить

Admin Admin 02.05.2011 13:37:03

Я же уже писал об этом. Добавьте ссылку <a href="http://myrusakov.ru/skrytyj-tekst-javascript.html">ссылка</a> на главную страницу.

Ответить

Alim_(I) Alim_(I) 02.05.2011 13:40:31

Ааа, тоесть это само создасться? skrytyj-tekst-javascript.html

Ответить

Admin Admin 02.05.2011 13:41:39

Эту страницу должны создать Вы.

Ответить

Alim_(I) Alim_(I) 02.05.2011 13:45:13

Так эти все пути сами не создаются?

Ответить

Admin Admin 02.05.2011 13:47:46

Пути задаются ссылками. Ссылки ведут на страницы. И эти страницы надо создавать. Извиняюсь, но у Вас очень слабые знания по HTML, поэтому советую посмотреть сначала бесплатный видеокурс: http://srs.myrusakov.ru

Ответить

Alim_(I) Alim_(I) 02.05.2011 13:52:39

Я имел ввиду вот этот путь skrytyj-tekst-javascript.html

Ответить

Alim_(I) Alim_(I) 02.05.2011 13:53:12

Я просто иногда называю его так=).

Ответить

Alim_(I) Alim_(I) 03.05.2011 15:12:02

Тоесть эту страницу www.****.ru/registraciya должен создать я, а потом направить ссылку на эту страницу да?

Ответить

Admin Admin 03.05.2011 15:58:40

Да.

Ответить

Alim_(I) Alim_(I) 02.05.2011 11:44:08

И у меня почему-то не обновилась инфо. о HTML, я недели 2 назад подписался на обновления, не че не изменилось.

Ответить

Admin Admin 02.05.2011 11:46:09

По HTML уже достаточно давно не было статей.

Ответить

Murat09 Murat09 31.03.2012 20:32:20

Михаил, а можно ли сделать так, чтобы клик на вопросе №1 автоматически закрывал вопрос №2?

Ответить

Admin Admin 31.03.2012 20:35:05

Можно, для этого нужно обращаться к другому id и закрывать его. Или пройтись циклом по всем id, все закрыть, а затем открыть тот, на который кликнули. Хотя лучше первый способ.

Ответить

Murat09 Murat09 31.03.2012 20:49:00

Михаил, без твоей помощи не обойтись. Если не трудно, напиши, пожалуйста, как это сделать

Ответить

Admin Admin 31.03.2012 20:51:29

Переписать весь скрипт надо. Вот пища для размышления: http://myrusakov.ru/uvelichenie-odnoj-kartinki-klik.html Если это не поможет, то продолжайте изучать JavaScript.

Ответить

Murat09 Murat09 31.03.2012 20:59:19

Ты не поверишь, но я с начала пробовал изучить именно этот скрипт :)) Значит, не все так безнадежно)) Ладно, спасибо за совет!!!

Ответить

Samovarnet Samovarnet 14.09.2012 06:23:54

Час добрый, Михаил! Такой "скрытый текст" можно сделать на Вордпресс? Пробовал этот код вставлять - не получается:( Что можешь подсказать?

Ответить

malina95 malina95 04.02.2013 21:04:20

А как менять текст по которму нажали? Например при открытии менять Вопрос №1 на Вопрос №1 [свернуть]?

Ответить

Admin Admin 04.02.2013 21:12:08

Передать помимо id блока с ответов, ещё и this (то есть сам заголовок), а внутри функции изменить свойство this.innerHTML = "Новая строка";

Ответить

malina95 malina95 04.02.2013 21:30:24

function expandit(title, id){ obj = document.getElementById(id); if (obj.style.display == "none") { obj.style.display = ""; title.innerHTML = "Свернуть [-]"; } else { obj.style.display = "none"; title.innerHTML = "Развернуть [+]"; } } Вроде получилось

Ответить

razor2211 razor2211 06.05.2013 08:00:38

Михаил, подскажи, как можно реализовать спойлер, который раскрывается плавно.

Ответить

Admin Admin 06.05.2013 10:04:55

Проще всего на jQuery, там есть методы fadeIn() и fadeOut() для этого.

Ответить

razor2211 razor2211 06.05.2013 11:52:20

Спасибо

Ответить

gala_78 gala_78 30.05.2013 22:20:46

Михаил, помогите. У меня валидатор заругался на onClick="expandit('ans1')", что делать?

Ответить

Admin Admin 31.05.2013 10:38:41

onclick пишите в этом случае, а не onClick.

Ответить

remox remox 06.07.2013 13:59:47

Здраствуйте, Михаил!)) нашел в одном коде такую строчку - <script src="new.js?0ac36" type="text/javascript"></script> хочу спросить, за что может отвечать параметр "0ac36"? убрал его - вроде все так же скрипт работает... спасибо)

Ответить

Admin Admin 06.07.2013 15:04:55

Это делается для избежания кэширования скрипта. Там идёт случайная строка каждый раз и тем самым скрипт не кэшируется и постоянно подгружается заново.

Ответить

remox remox 07.07.2013 00:09:38

но если у нас будет <meta http-equiv="pragma" content="no-cache">, надо ли ету строку писать?

Ответить

Admin Admin 07.07.2013 08:59:57

Необязательно.

Ответить

remox remox 07.07.2013 21:30:10

Михаил, а может ли ета строка служить еще для чего-нибудь? (посмотрел, она не обновляется, тоесть все время одна и та же)

Ответить

Admin Admin 07.07.2013 21:55:27

Она обновляется браузером. Но это не значит, что сам файл будет обновляться. Он-то никак и не должен меняться, пока его разработчики не захотят менять. Не путайте реальное обновление и кэширование.

Ответить

remox remox 08.07.2013 14:11:32

Благодарю за объяснение)хорошего Вам дня)

Ответить

tanysha86 tanysha86 09.01.2014 00:44:00

Добрый день, хочу реализовать скрытие кнопки при ее нажатии. Но почему-то ничего не происходит <html> <head> <title>Button</title> <script type="text/javascript"> function hiddenClick(button) { var but = document.getElementById(button); but.style.display = "none"; } </script> </head> <body> <input type="button" id="button" style="display:block" value="Кнопка" onclick="hiddenClick(button)"/> </body> </html> В чем может быто проблема. Вроде код элементарный.

Ответить

tikkiwiki tikkiwiki 09.01.2014 15:27:20

Напишите в службу поддержки.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.