Question

当我点击导航栏链接时，页面向下滚动。我该如何解决这个问题？我有一个带有链接列表的导航栏。这是 HTML

<ul>
  <li><a href="page.html#1">menu item 1</a></li>
  <li><a href="page.html#2">menu item 2</a></li>
  <li><a href="page.html#3">menu item 3</a></li>                    
</ul>

以下是 page.html 的代码（标签菜单和包含内容的3个div：

<ul class="tabs">
   <li><a href="#1">Tab 1</a></li>
   <li><a href="#2">Tab 2</a></li>
   <li><a href="#3">Tab 3</a></li>
</ul>   

<div id="1" class="tab_content"><p>Content 1</p></div>
<div id="2" class="tab_content"><p>Content 2</p></div>
<div id="3" class="tab_content"><p>Content 3</p></div>

这是我的 jquery代码：

var hash1 = location.hash;
var hash2 = hash1.substring(1, 2);

$(".tab_content").hide(); 
$('ul.tabs li:nth-child(' + hash2 + ')').addClass("active").show(); 
$('.tab_content:nth-child(' + hash2 + ')').show();  


$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); /
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); 
    return false;
});



$(window).on('hashchange', function(){
var hash = window.location.hash;

    elements = $('a[href="' + hash + '"]');
    if (elements.length === 0) {
        $("ul.tabs li:first").addClass("active").show(); 
        $(".tab_content:first").show(); 
    } else {
        elements.click();
        return false;           
    }
});

Answer 1

原因是href="#1"告诉浏览器滚动窗口，以便查看id 1的元素。它被称为“书签链接”。如果您不想要此行为，则需要在点击处理程序中对事件使用preventDefault()：

$("ul.tabs li a").click(function(e) {
    e.preventDefault();
});

单击href = #div时页面向下滚动

1 个答案: