javascript - 如何修复页面滚动

Question

当我点击标签 ID 时，我试图控制页面跳转，我的演示链接 http://jsfiddle.net/bala2024/x9ypj/

function showSection( sectionID ) {
    $('div.section').css( 'display', 'none' );
    $('div'+sectionID).css( 'display', 'block' );
}
$(document).ready(function(){
    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        $('ul#verticalNav li a').each(function() {
            $(this).click(function() {
                showSection( $(this).attr('href') );
            });
        });
        $('ul#verticalNav li:first-child a').click();
    }
});

Answer 1

首先，您可以更换

.css( 'display', 'block' );

只需

.show();

和，

.css( 'display', 'none' );

和

.hide();

最后，为了防止链接行为，您需要更改此块。-

$('ul#verticalNav li a').each(function() {
    $(this).click(function() {
        showSection( $(this).attr('href') );
    });
});

为了这。-

$('ul#verticalNav li a')
    .click(function(e) {
        showSection( $(this).attr('href') );
        e.preventDefault();
    });

Answer 2

防止锚标签的默认行为。查看更新的小提琴

$('#verticalNav a').click(function(){
    return false;
});

http://jsfiddle.net/x9ypj/1/

Answer 3

最好的方法是使用这个：

$('#verticalNav a').click(function(e){
    e.preventDefault();
});