Помогите убрать прыжок страницы при клике

Если Вы совсем новичок и слабо представляете себе возможности jQuery, не можете понять в каком форуме задать свой вопрос - Вам сюда.

Модераторы: TRAHOMOTO, tuareg, Gennady

Помогите убрать прыжок страницы при клике

Сообщение Grafs » 22 апр 2010, 18:13

Здравствуйте
Есть код для вкладок:
Код: выделить все
<!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>


Все работает на ура кроме одного нюанса
Если прокрутить страницу так чтобы нижняя вкладка оказалась вверху страница и кликнуть по меню вкладки то страница смещается вниз к первой вкладке.
Не могу понять в чем проблема. Как убрать смещение страницы чтобы при клике по меню страница не двигалась?
Буду очень благодарен за помощь.
Последний раз редактировалось Grafs 23 апр 2010, 00:41, всего редактировалось 2 раз(а).
Grafs
 
Сообщений: 3
Зарегистрирован: 22 апр 2010, 18:04

Re: Помогите убрать прыжок страницы при клике

Сообщение Gennady » 22 апр 2010, 21:54

Все, что переходит в hide, приходит к нулевой ширине и высоте - Ваши "прыжки" скорее всего именно из-за этого. Попробуйте (даже просто для эксперимента) в своем html-коде определить div'ам высоту, например height:150px (добавьте им еще и рамку для наглядности ;) ), а в JS-коде поиграйте временем. Например попробуйте сделать hide(1), а fadeIn(2500) и будет наглядно и очень понятно.
Долог путь поучения, короток и успешен путь примеров (Сенека).
I'm a member of jQuery Meetups. jQuery users unite! Connect with other jQuery users... Присоединиться к jQuery Russia.
Аватар пользователя
Gennady
Администратор
 
Сообщений: 1886
Зарегистрирован: 14 янв 2010, 14:36
Откуда: Москва

Re: Помогите убрать прыжок страницы при клике

Сообщение Grafs » 23 апр 2010, 00:39

Попробовал, ничего не помогает
В первом посте изменил код, можно скопировать и проверить
Проверял во всех FF,IE,Oprea,Сhrome
Поднимите вторую-нижнюю вкладку под самый верх экрана и кликните по меню. При первом клике страница съезжает вниз. В самом диве сейчас мало текста а когда много то съезжает существенно.
Я пока решил это таким методом:
$('html, body').scrollTop(e.pageY-(e.clientY - document.documentElement.clientTop));
Но это не решение, а так костыль временный, пока не найду решения.
Grafs
 
Сообщений: 3
Зарегистрирован: 22 апр 2010, 18:04

Re: Помогите убрать прыжок страницы при клике

Сообщение Grafs » 23 апр 2010, 00:51

О получилось но с глюками
В pr.find('div.wstabcn').hide(); изменил на pr.find('div.wstabcn').hide(1); и все.
Стало работать но иногда если быстро кликать то проскакивает съезжание.
И еще, если кликнуть на активной вкладке то страница съезжает
Grafs
 
Сообщений: 3
Зарегистрирован: 22 апр 2010, 18:04


Вернуться в Вопросы от совсем новичков

Кто сейчас на форуме

Сейчас этот форум просматривают: Google [Bot] и гости: 5