jquery слайд к атрибуту с определенным значением атрибута данных

Question

jquery слайд к атрибуту с определенным значением атрибута данных

0

Итак, у меня есть следующий навигатор с абсолютными URL:

<ul class="nav navbar-nav" id="main-menu">
    <li class="first active"><a href="http://example.com/" title="Home">Home</a></li>
    <li><a href="http://example.com/about.html" title="About">About</a></li>
    <li><a href="http://example.com/portfolio.html" title="Portfolio">Portfolio</a></li>
    <li class="last"><a href="example.com/contact.html" title="Contact">Contact</a></li>
</ul>

а затем статьи со следующими атрибутами данных:

<article class="row page" id="about" data-url="http://example.com/about.html">
    <div class="one">

    </div>
    <div class="two"

    </div>
</article>

и когда вы нажимаете ссылку в меню, я хотел бы проигнорировать факт, что это гиперссылка и перейти к текущей статье на основе ее атрибута data-url.

Я начал с того, что я считаю очевидным:

$('#main-menu li a').on('click', function(event) {
    event.preventDefault();
    var pageUrl = $(this).attr('href');

)};

и попытались найти и оживить, но тогда я не знаю, как ссылаться на статью с data-url = "http://example.com/about.html".

Любая помощь будет оценена по достоинству.

благодаря

Alex M 10 нояб. 2013, в 16:53

Источник

Теги:

jquery

custom-data-attribute

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-11-10T14-33-00.000Z

Пытаться

$('#main-menu li a').on('click', function (event) {
    event.preventDefault();
    var pageUrl = $(this).attr('href');
    var $article = $('article[data-url="' + pageUrl + '"]');
    if ($article.length) {
        $('body').stop(true).animate({
            scrollTop: $article.position().top
        })
    }
});

Демо: скрипка

Спасибо! Замечательно!! Интересно, если я оберну div вокруг всего сайта на внешнем слое, а затем добавлю скрытый переполнение, слайды не будут прокручиваться. Идея состоит в том, что вы не можете прокручивать, используя колесо прокрутки или полосу. Разве это не правильный способ сделать это?