6

我设置了一个 hashchange 函数来显示/隐藏关于页面的不同部分，而没有 7 个单独的页面。这一切都很好，事实上，只有一件小事困扰着我，当相关内容显示在屏幕上时，例如：#about01如果你再次点击菜单按钮，浏览器会跳到这个 div 的顶部，我不这样做不想发生。
这是我的 jQuery：

jQuery(document).ready(function(){

    jQuery(window).on('hashchange', function(){
        var hashFound = determineContent();
        if(hashFound) return false;
    });

    function determineContent(){

        var hash = window.location.hash;
        jQuery('.about').hide();

        jQuery('.sub-menu').each(function(){

             if (jQuery(this).attr('hook') === hash.replace('#about', '')) {
               jQuery('#about'+jQuery(this).attr('hook')).fadeIn();
                 return true;
             }
        });

        jQuery('html, body').animate({scrollTop:0}, 'slow');
        return false;
    }

    determineContent();
});

HTML：

<div id="sub-menu">
        <li id="sub-menu-01" class="sub-menu" hook="01"><a href="#about01">TEST</a></li>
        <li id="sub-menu-02" class="sub-menu" hook="02"><a href="#about02">TEST</a></li>
        <li id="sub-menu-03" class="sub-menu" hook="03"><a href="#about03">TEST</a></li>
        <li id="sub-menu-04" class="sub-menu" hook="04"><a href="#about04">TEST</a></li>
        <li id="sub-menu-05" class="sub-menu" hook="05"><a href="#about05">TEST</a></li>
        <li id="sub-menu-06" class="sub-menu" hook="06"><a href="#about06">TEST</a></li>
        <li id="sub-menu-07" class="sub-menu" hook="07"><a href="#about07">TEST</a></li>
    </div>

<div id="about01" class="about">CONTENT HERE
</div>

<div id="about02" class="about">CONTENT HERE
</div>

<div id="about03" class="about">CONTENT HERE
</div>

<div id="about04" class="about">CONTENT HERE
</div>

<div id="about05" class="about">CONTENT HERE
</div>

<div id="about06" class="about">CONTENT HERE
</div>

<div id="about07" class="about">CONTENT HERE
</div>

就像我说的那样，如果#about01显示，然后用户再次单击#sub-menu-01，则窗口会向下滚动到该 div 的顶部，这是 url 中哈希的正常行为。是一种防止默认行为而不是在单击时滚动到此 div 顶部的方法吗？
另外，我想弄清楚是否有一种方法可以#about01在页面加载时显示www.website.com/about而不是必须放入www.website.com/about/#about01等？

4

4 回答 4

1

问题出在您的 jquery.each 块中。

jquery.each 块中的“return true”不会返回，但会继续下一个项目。此外，这不会从您的确定内容函数返回，因此滚动的下一个代码也将被执行，并且确定内容将始终返回 false。

使用标志，例如

var found = false;
JQuery.each(function(){
   if(found) return;
   //if your condition is true then found = true
})

if(found) return true;
//else continue the next line.
于 2013-04-11T14:00:35.870 回答
0 
$("#id").click(function(event) {
    event.preventDefault();

    //do stuff
});

http://api.jquery.com/event.preventDefault/

于 2013-04-11T13:38:59.367 回答
-1 
$('a').click(function(event){
    event.preventDefault();
});

preventDefault()应该停止元素具有的任何默认事件。

http://api.jquery.com/event.preventDefault/

于 2013-04-11T13:38:49.667 回答
-1

尝试这个：

jQuery(window).on('hashchange', function(e){
    e.preventDefault();
    var hashFound = determineContent();
    if(hashFound) return false;
});

正如其名称所示，事件对象的preventDefault()方法将避免对该事件执行的默认行为。由于您希望在哈希更改时避免正常行为，因此该代码应该这样做。

于 2013-04-11T13:38:57.493 回答