Помогите убрать прыжек страницы при клике
Здравствуйте
Есть код для вкладок:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="author" content="Grafs" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('ul.wstab').each(function() {
$(this).find('li').each(function(i) {
$(this).click(function(e){
$(this).addClass('wstbcur').siblings().removeClass('wstbcur');
var pr = $(this).parents('div.wpposttab');
pr.find('div.wstabcn').hide();
pr.find('div.wstabcn:eq('+i+')').fadeIn(250);
});
});
});
});
</script>
<style type="text/css">
<!--
.wpposttab{width:100%;margin:10px 0;}
.wstab{position:relative;margin:0 0 0 10px;padding:0;z-index:22;}
.wpposttab .wstab li{position:relative;float:left;border:1px solid #d2d3d5;background:#f1f1f2;margin:0 5px 0 0;padding:5px 10px;text-align:center;text-transform:uppercase;font-weight:bold;color:#3c3b3d;list-style:none;}
.wpposttab .wstab li:hover{color:#f68b2e;cursor:pointer;}
.wstabl,.wstabr{position:absolute;top:-1px;width:6px;height:6px;overflow:hidden;font-size:0;background:url(images/round.png) no-repeat;}
.wstabl{left:-1px;background-position: 0 0;} .wstabr{right:-1px;background-position: -6px 0;}
.wstabcn{display:none;position:relative;border:1px solid #d2d3d5;background:#FFF;z-index:10;top:-1px;padding:10px 10px;overflow:hidden;}
.wstbshow{display: block;}
.wpposttab li.wstbcur{color:#f68b2e;border-bottom:1px solid #FFF; background:#FFF;}
.wpposttab li.wstbcur:hover{color:#f68b2e;cursor:auto;}
-->
</style>
<title>Untitled 3</title>
</head>
<body>
Вкладка 1
<div class="wpposttab">
<ul class="wstab">
<li class="wstbcur">Меню1</li>
<li>Меню2</li>
<li>Меню3</li>
</ul>
<div style="clear:both;"></div>
<div class="wstabcn wstbshow">Текст меню 1</div>
<div class="wstabcn">Текст меню 2</div>
<div class="wstabcn">Текст меню 3</div>
</div>
Здесь идет какойто текст<br />
Здесь идет какойто текст<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Вкладка 2<br />
<div class="wpposttab">
<ul class="wstab">
<li class="wstbcur">Меню1</li>
<li>Меню2</li>
<li>Меню3</li>
</ul>
<div style="clear:both;"></div>
<div class="wstabcn wstbshow">Текст меню 1</div>
<div class="wstabcn">Текст меню 2</div>
<div class="wstabcn">Текст меню 3</div>
</div>
Здесь идет какойто текст<br />
Здесь идет какойто текст<br />
Здесь идет какойто текст<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Все работает на ура кроме одного нюанса Если прокрутить страницу так чтобы нижняя вкладка оказалась вверху страница и кликнуть по меню вкладки то страница смещается вниз к первой вкладке. Не могу понять в чем проблема. Как убрать смещение страницы чтобы при клике по меню страница не двигалась? Буду очень благодарен за помощь. |
return false
|
Пробовал, не помогает
|
попробуй не hide-ом прятать предыдущий элемент, а сделать ему сразу .css({'display':'none'});
|
Всеравно зараза прыгает
|
Разберитесь с версткой. Данный js-код сам по себе не приводит к прыжку страницы, при нормально сверстанной странице. Попробуйте фаербагом повторить последовательность действий: скройте один таб, отобразите другой. и посмотрите, что происходит со страницей
|
Посмотрел, меняется у дивов display:block; на display:none; и все
Вот css:
.wpposttab{width:100%;margin:10px 0;}
.wpposttab .wstab{position:relative;margin:0 0 0 10px;padding:0;z-index:22;}
.wpposttab .wstab li{position:relative;float:left;border:1px solid #d2d3d5;background:#f1f1f2;margin:0 5px 0 0;padding:5px 10px;text-align:center;text-transform:uppercase;font-weight:bold;color:#3c3b3d;list-style:none;}
.wpposttab .wstab li:hover{color:#f68b2e;cursor:pointer;}
.wstabl,.wstabr{position:absolute;top:-1px;width:6px;height:6px;overflow:hidden;font-size:0;background:url(images/round.png) no-repeat;}
.wstabl{left:-1px;background-position: 0 0;} .wstabr{right:-1px;background-position: -6px 0;}
.wstabcn{display:none;position:relative;border:1px solid #d2d3d5;background:#FFF;z-index:10;top:-1px;padding:10px 10px;overflow:hidden;}
.wstbshow{display: block;}
.wpposttab li.wstbcur{color:#f68b2e;border-bottom:1px solid #FFF; background:#FFF;}
.wpposttab li.wstbcur:hover{color:#f68b2e;cursor:auto;}
|
ага, и сейчас кто-то должен сверстать себе страничку с вашим кодом, подключить ваш js, чтобы решить вашу же детскую проблему?
|
Если есть возможность помочь решить мою детскую проблему по другому то я только ЗА.
|
Обновил в первом посте код, это готовая html страничка для теста.
Попробуйте прокрутить страницу вниз и нажать на любой пункт менб во 2 вкладке. |
хз. у меня страница ника не прыгает. в каком браузере проверяете?
П.С. попробуйте поклацать по уже активной вкладке =) |
Клацал и по активной и по не активной
Проверял во всех FF,IE,Oprea,Сhrome Поднимите вторую-нижнюю вкладку под самый верх экрана и кликните по меню. При первом клике страница съезжает вниз. В самом диве сейчас мало текста а когда много то сьезает существенно. Я пока решил это таким методом
$('html, body').scrollTop(e.pageY-(e.clientY - document.documentElement.clientTop));
Но это не решение, а так костыль временный, пока не найду решения. |
Я то понимаю что происходит, и скажу, это нормально, но если уж сильно хочется убрать скачки попробуй
<div class="wstabcn wstbshow">Текст меню 1</div> <div class="wstabcn">Текст меню 2</div> <div class="wstabcn">Текст меню 3</div> эти блоки вложить в еще один div и дать ему фиксированную высоту или же если не планируется поддержка ие6 то можно динамически менять ему стиль min-height на максимально возможный при переключении вкладок... |
Похоже проблему решил, но с глюками
В pr.find('div.wstabcn').hide(); изменил на pr.find('div.wstabcn').hide(1); и все. Но при этом если быстро кликать то проскакивает съезжание. И еще, если кликнуть на активной вкладке то страница съезжает. Как отключить в этом коде скрипта евент на активной вкладке? |
| Часовой пояс GMT +3, время: 09:43. |