JS Показать/скрыть привязку переключателя DIV к верхней части страницы

Я использую Java Script Show/Hide DIV Toggler, который я нашел здесь. Это работает, но с побочным эффектом, заключающимся в том, что каждый щелчок по переключателю приводит меня к началу страницы. Проверено в FF и Chrome, то же самое в обоих браузерах. Я не могу точно сказать, перезагружает ли он страницу, но я знаю, что она не перезагружается.

Вот сценарий:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

Это переключатель (обратите внимание на href="#" - это проблема?):

<a href="#" onclick="toggle_visibility('gallery_info');">[Click to see more details]</a>

И это div, который отображается/скрывается (как вы можете видеть, он начинает скрываться):

<div id="gallery_info" style="display: none;">

Есть идеи?

Большое спасибо! Алекс


toggle jquery show-hide href
person Alex Karasulas    schedule 02.07.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

используйте javascript: как href вместо #

<a href="javascript:" onclick="toggle_visibility('gallery_info');">[Click to see more details]</a>
person RRcom Resty    schedule 02.07.2012
comment
Или javascript:void(0) : оператор void вернет нулевое значение, поэтому браузер не будет загружать новую страницу. - person Roko C. Buljan; 02.07.2012
comment
Эй, ребята, спасибо за это, я использовал javascript: void (0), и это работает! Спасибо вам! - person Alex Karasulas; 02.07.2012

arrow_upward
1
arrow_downward

это не связано с функцией, это тег a, который перемещается вверх страницы, вы можете использовать event.preventDefault() или return false внутри функции для предотвращения действия тега a по умолчанию.

person undefined    schedule 02.07.2012

arrow_upward
0
arrow_downward

Добавьте e.preventDefault() в функцию, чтобы остановить поведение по умолчанию при нажатии на ссылку. Указание href='#' указывает на ссылку на начало текущей страницы, поэтому вы сейчас видите такое поведение. Если вы используете jquery, вы также можете return false вместо этого использовать функцию.

Обратите внимание, что переменная e выше — это объект события, переданный в качестве первого аргумента функции onclick.

person Alex.Bullard    schedule 02.07.2012
comment
Извините, может быть, я был неясен, я имел в виду e, на который ссылается мой ответ, а не тот, который у него есть в его функции. Я боялся, что он запутается, так как уже определил переменную с именем e. - person Alex.Bullard; 02.07.2012
comment
Я был бы рад увидеть, как вы реализуете e.preventDefault() jsbin.com/ilisoj/edit# JavaScript, HTML, Live - person Roko C. Buljan; 02.07.2012
comment
Спасибо за это, я не мог заставить его работать по какой-то причине (я думаю, что виноват мой недостаток навыков и понимания: D), но обнаружил, что вышеизложенное хорошо работает для меня. Ценить это! - person Alex Karasulas; 02.07.2012