Помогите убрать прыжек страницы при клике
Здравствуйте
Есть код для вкладок:
<!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>
Все работает на ура кроме одного нюанса
Если прокрутить страницу так чтобы нижняя вкладка оказалась вверху страница и кликнуть по меню вкладки то страница смещается вниз к первой вкладке.
Не могу понять в чем проблема. Как убрать смещение страницы чтобы при клике по меню страница не двигалась?
Буду очень благодарен за помощь. |