在鏈接中使用散列時取消頁面滾動。

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事件。