Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.11.2015, 01:29
Новичок на форуме
Отправить личное сообщение для СергейХ Посмотреть профиль Найти все сообщения от СергейХ
 
Регистрация: 16.11.2015
Сообщений: 6

как показать скрытый спан элемент
Хотим показать при клике на ссылку с классом "next" скрытый спан элемент с классом "invisible" (спан скрыт в атрибуте style спана).

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
    <link href="style2.css" rel="stylesheet">
  </head>
  <body>
        <div class="film"><h1>Побег из Шоушенка</h1><img alt="" src="http://st.kp.yandex.net/images/film_iphone/iphone360_326.jpg" class="poster">
        <p>Успешный банкир Энди Дюфрейн обвинен в убийстве собственной жены и ее любовника. Оказавшись в тюрьме под названием Шоушенк, он сталкивается с жестокостью и беззаконием,
        <a href="" class ="next dn">Дальше </a>
        <span class="invisible" style="display: none">царящими по обе стороны решетки. Каждый, кто попадает в эти стены, становится их рабом до конца жизни. Но Энди, вооруженный живым умом и доброй душой, отказывается мириться с приговором судьбы и начинает разрабатывать невероятно дерзкий план своего освобождения.</span></p>
        </div>

var next = document.querySelector('.next');
      var inv = document.querySelector('.invisible');
      function vis () {
        inv.style.display = "inline";
      }
      next.onclick = vis;

</body>
</html>


Почему спан элемент по клику показывается и через секунду исчезает?
Как лучше это реализовать?

Последний раз редактировалось СергейХ, 16.11.2015 в 23:37.
Ответить с цитированием
  #2 (permalink)  
Старый 16.11.2015, 01:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

СергейХ,
потому что страница перезагрузилась
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 16.11.2015, 03:14
Новичок на форуме
Отправить личное сообщение для СергейХ Посмотреть профиль Найти все сообщения от СергейХ
 
Регистрация: 16.11.2015
Сообщений: 6

а почему страница перезагрузилась?
и в каких случаях она перезагружается?
и можно ли сделать чтобы она не перезагрузилась?
Ответить с цитированием
  #4 (permalink)  
Старый 16.11.2015, 03:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

СергейХ,
https://learn.javascript.ru/default-browser-action
function vis () {
 inv.style.display = "inline";
*!*
 return false
*/!*
 }
Ответить с цитированием
  #5 (permalink)  
Старый 16.11.2015, 23:41
Новичок на форуме
Отправить личное сообщение для СергейХ Посмотреть профиль Найти все сообщения от СергейХ
 
Регистрация: 16.11.2015
Сообщений: 6

Сообщение от рони Посмотреть сообщение
СергейХ,
https://learn.javascript.ru/default-browser-action
function vis () {
 inv.style.display = "inline";
*!*
 return false
*/!*
 }
Пожалуйста, помогите, чтобы код работал, все равно не работает..
Ответить с цитированием
  #6 (permalink)  
Старый 16.11.2015, 23:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

СергейХ,
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <link href="style2.css" rel="stylesheet">
 </head>
 <body>
 <div class="film"><h1>Побег из Шоушенка</h1><img alt="" src="http://st.kp.yandex.net/images/film_iphone/iphone360_326.jpg" class="poster">
 <p>Успешный банкир Энди Дюфрейн обвинен в убийстве собственной жены и ее любовника. Оказавшись в тюрьме под названием Шоушенк, он сталкивается с жестокостью и беззаконием,
 <a href="" class ="next dn">Дальше </a>
 <span class="invisible" style="display: none">царящими по обе стороны решетки. Каждый, кто попадает в эти стены, становится их рабом до конца жизни. Но Энди, вооруженный живым умом и доброй душой, отказывается мириться с приговором судьбы и начинает разрабатывать невероятно дерзкий план своего освобождения.</span></p>
 </div>

 <script>
 var next = document.querySelector('.next');
 var inv = document.querySelector('.invisible');
 function vis () {
 inv.style.display = "inline";
 return false
 }
 next.onclick = vis;
 </script>
 </body>
 </html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выбрать элемент, который отправлялся ajax Nifler jQuery 5 20.08.2015 08:42
Как вытащить дочерний элемент? alexandr_v-vich Элементы интерфейса 7 29.02.2012 14:35
Как удалить элемент из дерева DOM dummer jQuery 13 16.01.2011 16:19
имея this как удалить элемент из тела html clgs Общие вопросы Javascript 1 13.05.2009 17:55
Как передать элемент в функцию после createElement Oleg NT Общие вопросы Javascript 3 23.06.2008 02:11