jquery: hashchange, предотвращение перехода к хэшу

у меня есть функция 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 etc?

6
css hashchange html jquery

4 ответов

проблема в вашем jquery.каждый блок.

"return true" внутри jquery.каждый блок не возвращается, но продолжается для следующих элементов. Кроме того, это не вернется из вашей функции determineContent, поэтому следующий код для прокрутки также будет выполнен, и determineContent всегда будет возвращать 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.
0

попробуйте это:

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

на preventDefault() метод объекта event будет избегать, как показывает его имя, поведения по умолчанию, которое будет выполняться для этого события. Поскольку вы хотите избежать нормального поведения при изменении хэша, этот код должен делать.

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

    //do stuff
});

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

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

на preventDefault() должен остановить все события по умолчанию, которые имеет элемент.

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

0