我有3个切换按钮,显示/隐藏3周的div:
问题:每当我点击按钮的任何,页面滚动起来,但不是顶端...这是非常恼人的,因为它指导用户的焦点远离切换的内容...
我不认为这是href =“#”,因为我确实指定了书签他们...
请注意,最后两个div有相同数量的内容,但第一个e有点少...
为什么每次点击按钮时视口都会向上移动? 修复它的最佳方法是什么?
<div id="featuredToggle">
<ul>
<li><a class="latestClick clickedStyle" href="#latestInner">Latest</a></li>
<li><a class="make" href="#make">Make</a></li>
<li><a class="models" href="#models">Models</a></li>
</ul>
</div>
<div id="latestInner">
content here
</div>
<div id="make">
content
</div>
<div id="models">
content
</div>
JS:
$(document).ready(function() {
$('#make').hide(50);
$('#models').hide(50);
$('#featuredToggle ul li a').click(function (e) {
e.preventDefault();
if ($(this).hasClass('latestClick')) {
$('#featuredToggle ul li a.make').removeClass('clickedStyle');
$('#featuredToggle ul li a.models').removeClass('clickedStyle');
$(this).addClass('clickedStyle');
$('#make').hide(200);
$('#models').hide(200);
$('#latestInner').show(500);
} else if ($(this).hasClass('make')) {
$('#featuredToggle ul li a.latestClick').removeClass('clickedStyle');
$('#featuredToggle ul li a.models').removeClass('clickedStyle');
$(this).addClass('clickedStyle');
$('#latestInner').hide(200);
$('#models').hide(200);
$('#make').show(500);
} else if ($(this).hasClass('models')) {
$('#featuredToggle ul li a.latestClick').removeClass('clickedStyle');
$('#featuredToggle ul li a.make').removeClass('clickedStyle');
$(this).addClass('clickedStyle');
$('#latestInner').hide(200);
$('#make').hide(200);
$('#models').show(500);
}
});
});
谢谢!
它可能是因为页面大小正在减少,因为这些元素的损失。尝试将body和html的CSS设置为:'min-hieght:100%; height:100%; max-height:100%;'。走着瞧吧。 – sourRaspberri 2013-03-20 13:16:52
我虽然如此,但我虽然也许有一个解决方案/技巧,我不知道...我会尝试看看会发生什么 – DextrousDave 2013-03-20 13:20:30
可以做'.css({'opacity':'0'})'那个技术上仍然存在的元素的方式并不会改变身体的高度等仅作为测试。不是解决方案。 – sourRaspberri 2013-03-20 13:22:07