Question

我设置了一个hashchange函数来显示/隐藏about页面的不同部分，而没有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等？

Answer 1

试试这个：

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

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

Answer 2

$("#id").click(function(event) {
    event.preventDefault();

    //do stuff
});

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

Answer 3

问题出现在你的jquery.each块中。

jquery.each块中的

“return true”将不会返回，但会继续执行下一个项目。此外，这不会从您的determineContent函数返回，因此下一个滚动代码也将被执行，confirmContent将始终返回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.

Answer 4

$('a').click(function(event){
    event.preventDefault();
});

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

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

jquery：hashchange，防止跳转到hash

4 个答案: