0

私はサイトを作成していますが、特定の div をハイライト表示する方法がわかりません。ホーム、サイトマップ、連絡先と表示されている上部のナビゲーションで、フッターの div を強調表示する必要があります。連絡先をクリックすると、一番下までドラッグしたいのですが、連絡先のdivを強調表示して、すぐに注意を向けて見つけやすくしたいと思います。いくつかのプラグインを試しましたが、うまく機能しませんでした。

サイト

 <div id="navContainer">
<div id="nav">
    <ul>

        <li><a href="index.html" class="scroll nav">Home</a></li>
        <li><a href="#footer" class="scroll nav">Site Map</a></li>
        <li><a href="#footer" class="scroll nav">Contact</a></li>
    </ul>
</div>

4

3 に答える 3

1

おそらくこのようなもの： http://jsfiddle.net/E6h5u/1

// on click of a nav element with class scroll
$('nav .scroll').click(function () {
    // select the corresponding footer element 
    // (you may want to work with a class or data attribute, in stead of basing on the content)
    var $footer = $('footer a:contains(' + $(this).text() + ')');
    // scroll to it
    $("body").animate({
        scrollTop: $footer.offset().top
    }, "slow", function () {
        // when the scroll is ready, add a highlight class
        $footer.addClass('highlight');
        // wait some, and remove the class again
        setTimeout(function() { $footer.removeClass('highlight'); }, 1000);
    });
});

コードのコメントに説明を入れていますが、お気軽に質問してください。

強調表示に css トランジションを含むクラスを使用しましたが、必要に応じて jQuery アニメーションを使用することもできます (レガシー ブラウザーと css トランジションとの互換性のため...)。

于 2013-06-28T20:36:53.897 に答える
1

jQueryを使用して、連絡先ボタンにIDを追加し、IDを追加するとcontact、これが機能しulますcontactUL。ここにjsFiddleがあります

$("#contacter").click(function() {
    $(window).scrollTop($(document).height());
    $("#contact").css("background-color", "yellow");
});
于 2013-06-28T19:45:27.360 に答える