在链接中使用哈希时取消页面滚动

Cancel page scroll when using hash in links.

本文关键字：取消 滚动 哈希时 链接      更新时间：2023-09-26

我用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();
    });

//启用链接到精确的Tab

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

使用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();
});

好的，所以我找到了决定。最佳&最简单的方法是使用Bens-AlmansjQ插件-hashchange事件。

相关文章：