当我们点击标签链接时，转到页面顶部

Question

我正在使用javascript设置垂直标签，垂直标签工作正常，但页面没有显示标题。

HTML：

 <ul>
    <li><a href="#a1">a1</a></li>
    <li><a href="#b1">b1</a></li>          
    </ul>
    <div id="sections">
    <div class="section" id="a">
    </div>
    <div class="section" id="b">
    </div>

我的演示链接：http://www.bajistech.info/tiltindicators.html#TiltWatch-Plus1，当我点击垂直标签时，我正在尝试进行页面滚动。

脚本1：

     $(document).ready(function(){

    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        //$('ul#verticalNav li a').each(function() {
        $('ul#verticalNav li a').click(function() { 
            showSection( $(this).attr('href') );
        });
  // if hash found then load the tab from Hash id
        if(window.location.hash) 
        {
   // to get the div id
           showSection( window.location.hash);
        }
        else // if no hash found then default first tab is opened
        {
            $('ul#verticalNav li:first-child a').click();
        }
    }
});
</script>

脚本2

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() { // no need for each loop
        $('ul#verticalNav li a').click(function() { // Use $('ul#verticalNav li a').click
            showSection( $(this).attr('href') );
        });
        //});
        if(window.location.hash) // if hash found then load the tab from Hash id
        {
           showSection( window.location.hash);// to get the div id
        }
        else // if no hash found then default first tab is opened
        {
            $('ul#verticalNav li:first-child a').click();
        }
    }
});

Answer 1

您需要在click处理程序中接受该事件，并致电event.preventDefault()以阻止浏览器关注您与"#"的链接。

如果您确实希望链接将您带到页面的一部分，则需要将其ID匹配。 "#a1"的href永远不会将您带到ID为"a"的div。 整个 ID必须匹配，而不仅仅是其中的一部分。您的脚本遇到同样的问题。您的href为#a1和#b1，您的div的ID为a和b。为什么要添加1？ 1应该做什么？ href和ID必须与您编写的用于链接a / div的代码相同。