jQuery Tabs - Предотвращение привязки прокрутки страницы вверху при нажатии

Question

Я создал скрипку, которая демонстрирует мою проблему (http://jsfiddle.net/PR2Yn/). Я попробовал функцию предотвращения, но безрезультатно.

<div id="horizontalTab"> 
<ul class="resp-tabs-list"> 
    <li> <a href="#" class="accordionNav residents" tabindex="0">Residents<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav business" tabindex="0">Business<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav visitors" tabindex="0">Visitors<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav wealden247" tabindex="0">Wealden 24/7<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav payforit" tabindex="0">Pay for it<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav applyforit" tabindex="0">Apply for it<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav reportit" tabindex="0">Report it<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav planning" tabindex="0">Planning<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav bins" tabindex="0">Bins<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav council" tabindex="0">Your Council<div class="tri"></div></a> </li> 
</ul> 

В частности, информационные вкладки в нижней части страницы переходит к верхней части страницы, когда они щелкают. Это нормально, пока вы не прокручиваете вниз, но если вы прокрутили вниз, возникает проблема, так как вам приходится постоянно находить, где вы были.

Answer 1

Вам нужно определить

href='javascript:void(0);' 

вместо

href='#' 

во всех якорных тегов окружающих изображений новостей и контента.

Если вы определяете href = '#' в привязке, он добавит # в конец URL-адреса вашей страницы и вскакивает.

Answer 2

Глядя на вашу скрипку, кажется, что проблема, с которой вы сталкиваетесь, - это не обычный прыжок/прокрутка (браузером в ответ на обработчик события onclick), а проблема с вкладками: каждая открытая вкладка, ранее нажатый (даже если щелкнуть, чтобы закрыть его) также открывается. Вы можете увидеть это, выполнив следующие действия:

1) Click on "Residents" tab to open it; 
2) Click on it again to close it; 
3) Now scroll down and click on another tab (such as "Apply for it"); 
4) Then you will be scrolled up because, in fact, "Residents" is also reopened. 

Я думал, что это был вызван каким-то вопросом в вашем яваскрипте код или HTML, но я не мог найти любую проблему. В тесте я удалил большую часть вашего javascript и HTML, поддерживая только очень простой вызов easytabs, и проблема не устранена.

Так что я думал, что проблема может быть связана с плагином easyResponsiveTabs.js. Поэтому я изменил внешний ресурс в скрипке, используя ту, которая используется «официальным» easyResponsiveTabs example page, и проблема исчезла. Вы можете видеть, как ваши вкладки работают здесь: http://jsfiddle.net/8gWe9/

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