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

使用 jQuery，将 id 添加到联系人按钮，然后添加一个contact到ullike ，contactUL然后就可以了。这是一个jsFiddle

$("#contacter").click(function() {
    $(window).scrollTop($(document).height());
    $("#contact").css("background-color", "yellow");
});
于 2013-06-28T19:45:27.360 回答
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 回答
0

必须使用 javascript（最好是 JQuery，如前一张海报所说）。这是一个有效的 Fiddle，展示了如何解决这个问题。

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

$('#nav ul li:nth-child(3) a').click(function(){
    $('#footer .contact').addClass('highlight');
});
于 2013-06-28T19:58:14.653 回答