jquery - 在我的 jsp 页面中的链接之间切换时页面上升。我怎样才能避免这种情况？

Question

I have following code in my jsp page
<div  class="listtable roundBox" >
            <br>
            <ul id="breadcrumbs">         
                <li>
                    <a href='#' id='oneday' data-pid="1">1 day</a>
                </li>

                <li>               
                    <a href='#' id='fivedays' data-pid="5">5 days</a>                    
                </li>            
            </ul>             
            <div id="firstChart"  style="height:400px;width:98%; "></div>
        </div> 

当在 1 天和 5 天之间切换时，页面会上升。如何将焦点集中在这个 div 上？

Answer 1

如果您已加载 jquery 库，则可以执行以下操作：

$(function(){
    $('#breadcrumbs a').on('click', function(e){
       e.preventDefault();
    });
});

.preventDefault()用于停止 an 等的默认anchor行为form elements。

Answer 2

这是因为元素的#inhref属性。a它用于表示书签链接。如果页面中没有设置书签，则浏览器默认为文档的开头。您可以使用 jQuery 来防止这种行为：

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

如果仅在指定链接时才需要访问链接，请使用：

$('#breadcrumbs a').click(function(e) {
    $(this).prop('href') == '#' && e.preventDefault();
});