Скрыть div с именем привязки в pageload и показывать его только при нажатии на ссылку

0

На моей странице есть тег div с id=divid div и тегом привязки, чье href имеет значение #divid.

Моя ссылка href появляется перед тегом div, и я написал ее как:

<a href=#divid>go to div</a>

Чтобы щелкнуть ссылку, она должна прокрутиться, чтобы показать указанный div. Но проблема в том, что я хочу, чтобы div не отображался при загрузке страницы, а должен быть видимым при нажатии ссылки, но это не удается.

Я написал это как: <div id="divid" style="display:none;">bla bla</div>

когда я удаляю display :none не работает нормально, но в противном случае вообще нет. Извините за нечеткую структуру тегов, так как строка, за которой следуют начальные теги, здесь не отображается, поэтому я удалил их.

  • 2
    Слишком много теории ...
  • 1
    пожалуйста, укажите ваш код здесь
Теги:

3 ответа

3
Лучший ответ

Для этого вам нужно будет интегрировать JavaScript и CSS. Этапы:

  1. Ваш CSS должен будет скрыть DIV, который вы хотите скрывать

  2. В anchor onClick вы очищаете класс, который скрывает DIV:

    <body>
    <a href="#myhiddensection" onClick="document.getElementById('myhiddensection').style.display='block';">Go there!</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div>Nothing below to see at load!</div>
    <div id="myhiddensection" style="display: none">Hello there!</div>
</body>

Обратите внимание, что в приведенном выше примере используется чистый JS. Если бы вы использовали что-то вроде jQuery, это могло бы быть намного чище, как показано ниже, и вам не придется беспокоиться о странных кросс-браузерных причудах:

<body>
    <a href="#myhiddensection" onClick="$('#myhiddensection').show();">Go there!</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div>Nothing below to see at load!</div>
    <div id="myhiddensection" style="display: none">Hello there!</div>
</body>
Поделиться
  • 0
    спасибо за решение. Это тоже сработало ... :-)
2

Вы можете сделать это с помощью простого CSS:

HTML

<a href="#a">a</a>

<div id="a" class="page"> this is a id content...</div>

CSS

#a{
 display:none;
}

#a:target{
 display:block;
}
Поделиться
  • 0
    Я попробовал это, но, похоже, не работает.
  • 0
    спасибо это сработало !! ура, ...
Показать ещё 2 комментария
0

если ваш идентификатор div: нет, а не писать, вы можете написать это

 <a onclick="scrolltodiv();"></a>
 <script>
 function scrolltodiv(){
     var topPosition = $('#divid').scrollTop().top;
     $(window).scrollTop(topPosition);
 }
 </script>

и если вы не используете jQuery, просто используйте document.getElementById, это просто сработает

Поделиться
  • 0
    Эй, спасибо .. Я не смог попробовать этот путь. Но, конечно, постараюсь и проинформирую вас об этом. В любом случае, еще раз спасибо за помощь.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню