Javascript 单击时突出显示特定的div以吸引注意

我正在制作一个网站，但我还没有弄清楚如何突出某个div，而不让所有内容都变得不成比例。我希望顶部的导航显示主页、站点地图和联系人，以突出显示页脚中的div。当你点击“联系人”时，我想让它将你拖到它所在的底部，但我想让它突出显示“联系人”div，以便迅速吸引你的注意力，以便更容易找到它。我尝试了一些插件，但效果不好

---

使用jQuery，向联系人按钮添加一个id，如

contact

，向

ul

添加一个id，如

contactUL

，则此操作有效。这是一个

必须使用javascript（最好是JQuery，正如前面的海报所说）。这是一把工作小提琴，展示了你可以怎样做

---

也许是这样的：

我将解释放在代码注释中，但请随意询问

---

请注意，我使用了一个带有css转换的类来突出显示，但是如果您愿意，也可以使用一些jQuery动画（为了与css转换兼容的传统浏览器…）

OP没有提到任何关于jQuery的内容。有没有一种不用它的方法可以做到这一点？更新，请参阅JSFIDLE。我注意到你已经有了联系人id，所以我把名字改成了fityes是的，差不多就是这个。错误的地方，但我想我可以找到它哈哈。谢谢你，现在它爆炸了所有其他javascript，哈哈。隐马尔可夫模型

 <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>

$("#contacter").click(function() {
    $(window).scrollTop($(document).height());
    $("#contact").css("background-color", "yellow");
});

$('#nav ul li:nth-child(3) a').click(function(){
    $('#footer .contact').addClass('highlight');
});

// 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);
    });
});