0

私は新しいウェブサイトに取り組んでいます。今、私は固定位置メニューリストを持っています：

メニューhtml

<ul id="work-nav">
    <li class="selected">   
        <span class="label">new</span>
        <a href="#cake-film">Cake Film</a>
    </li>
    <li>
        <a href="#LOS-BANGELES">Los Bangeles</a>
    </li>
    <li>
        <a href="#museumnacht">Museumnacht - N8</a>
    </li>
    <li>
        <a href="#crosby-stills-nash">Crosby, Stills &amp; Nash</a>
    </li>
    <li>
        <a href="#meltinpot">Meltin'Pot</a>
    </li>
    <li>
        <a href="#nstore">N-store</a>
    </li>
    <li>
        <a href="#viewbook">Viewbook</a>
    </li>
    <li>
        <a href="#foodnotes">Foodnotes</a>
    </li>
</ul>

私がやりたいのは、記事の上部（リンクアンカーのIDを使用）の場合です。

記事のhtml

<article id="#LOS-BANGELES" class="page">
    <div class="wrap">
        <div class="info">
            <p>Los Bangeles Sed eu mauris nibh. Nunc sit amet mauris vitae nibh ultricies
                volutpat id a massa. Nulla lobortis odio vel velit eleifend at elementum.
                Sed eu mauris nibh. Nunc sit amet mauris vitae nibh ultricies volutpat
                id a massa.</p>
            <p>Nulla lobortis odio vel velit eleifend at elementum</p>
        </div>
    </div>
</article>

ビューポートの上部にヒットすると.info、関連するリストアイテムの下に記事divが追加されます。このような。

望ましい結果html

<li class="selected">
    <a href="#LOS-BANGELES">Los Bangeles</a>
</li>
<li class="info">THE INFO FROM THE LOS BANGELES ARTICLE</li>

メニュー

どうすればこれを達成できますか？ウェイポイントを使用して、アンカーがビューポートにあるかどうかを確認しています。

Jqueryソリューション？

$('#work article').waypoint(function (d) {
    var $active = $(this);
    if (d === "up") {
        $active = $active.prev();
    }
    if (!$active.length) $active = $active.end();

    $('.active').removeClass('active');
    $active.addClass('active');
    /* 
    SOMEWHERE HERE I NEED TO REMOVE THE.info LI FROM THE OLD SELECTED MENU ITEM, IF EXSISTS
    AND APPEND A NEW ONE BASED ON THE ARTICLE.info DIV, BUT HOW
    */
    $('.selected').removeClass('selected');
    $('a[href=#' + $active.attr('id') + ']').addClass('selected');
});
4

1 に答える 1

0 
// Removes any existing info items from nav
$('#work-nav .info').remove();

// Copies contents of the info div in the currently active article
var $infoContents = $active.find('.info').contents().clone();

// Create a new li.info to inject into the nav;
var $infoLI = $('<li class="info"></li>');

// Set the content of that li to our copy of the article info
$infoLI.append($infoContents);

// Add the new info li after the nav item wrapper our matched link
$('a[href=#' + $active.attr('id') + ']').closest('li').after($infoLI);
于 2013-02-01T23:38:02.140 に答える