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

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 应该做什么？对于您为将 a/div 链接在一起而编写的代码，href 和 ID 必须相同。