Question

我正在制作一个网站而且我无法弄清楚如何突出某个div，而不是一切都不成比例。我想要顶部导航，它显示主页，站点地图和联系人以突出显示页脚中的div。当你点击联系我希望它你拖到它的底部，但我希望它突出显示联系div只是为了让你的注意力真正快速，所以它更容易找到。我尝试了一些插件，但他们并没有很好地工作。

Site

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

Answer 1

使用jQuery，将ID添加到联系人按钮，例如contact，将{1}添加到ul，例如contactUL，然后就可以了。这是jsFiddle

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

Answer 2

这样的事可能： 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过渡的兼容性可能......）

Answer 3

必须使用javascript（最好是JQuery，正如之前的海报所说）。这是一个工作小提琴，展示你如何才能做到这一点。

http://jsfiddle.net/HerrLoop/eBxyM/1/

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

突出显示点击特定div以吸引注意力

3 个答案: