在链接中使用散列时取消页面滚动。

Question

我用jQuery制作了标签。我需要能够链接到确切的选项卡。已完成（代码如下）我面对的问题是，在切换标签后，我无法阻止页面滚动。我怎样才能禁用滚动，但仍然使用哈希？

<ul class="tabs group"> 
    <li> 
    <a id="komp-link" class="switch" href="#komplekti">Komplekti</a> 
    </li> 
    <li> 
    <a id="intern-link" class="switch" href="#internets">Internets</a> 
    </li> 
    <li> 
    <a id="iptv-link" class="switch" href="#iptelevizija">IP Televizija</a> 
    </li> 
</ul> 

<div id="komplekti">content 1</div> 
<div id="internets">content 2</div> 
<div id="iptelevizija">content 3</div> 

//卡开关

$('#komp-link').click(function(){ 
     $('#komplekti').show(); 
     $('#internets').hide(); 
     $('#iptelevizija').hide(); 
    }); 
    $('#intern-link').click(function(){ 
     $('#komplekti').hide(); 
     $('#internets').show(); 
     $('#iptelevizija').hide(); 
    }); 
    $('#iptv-link').click(function(){ 
     $('#komplekti').hide(); 
     $('#internets').hide(); 
     $('#iptelevizija').show(); 
    }); 

//启用连接到精确选项卡

if(window.location.hash) { 

     var getHash = window.location.hash; 
     console.log(getHash) 
     $(getHash).show(); 
    } 

Answer 1

使用event.preventDefault()：

$('#komp-link').click(function(e){ 
    e.preventDefault(); 
    //... 
}); 

你应该能够简化代码尽管..

<ul class="tabs group"> 
    <li> 
    <a id="komp-link" class="switch" href="#komplekti">Komplekti</a> 
    </li> 
    <li> 
    <a id="intern-link" class="switch" href="#internets">Internets</a> 
    </li> 
    <li> 
    <a id="iptv-link" class="switch" href="#iptelevizija">IP Televizija</a> 
    </li> 
</ul> 

<div id="komplekti" class="tab">content 1</div> 
<div id="internets" class="tab">content 2</div> 
<div id="iptelevizija" class="tab">content 3</div> 

...

$('.switch').click(function(e) { 
    e.preventDefault(); 
    $('.tab').hide(); 
    $($(this).href()).show(); 
}); 

Answer 2

好了，所以我发现决定。 最好的&最简单的方法是使用Bens Almans jQ plugin - hashchange事件。