Question

我的导航看起来像这样：

<a href="index.html" class="nav">Home</a>
<a href="about.html" class="nav">About</a>
<a href="#" class="nav">Services</a>
<a href="contact.html" class="nav">Contact</a>

在index.html上，我简要提一下提供的两项服务，并为每一项提供“阅读更多”链接。它看起来像这样：

<div style="width:468px; height:180px; float:left; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;font-size:13px;line-height:17px;color:#666666;">
<span class="article"><b style="font-size:14px; color:#000000">Service #1</span>
<div style="padding-right:24px; padding-top:6px;font-size:12px; line-height:18px; color:#333333">Description</div> <!-- end "div" -->
<a href="vpn.html" class="readmore">Read More</a>
<div style="clear:both; font-size:1px; line-height:1px;"></div> <!-- end "div" -->
</div> <!-- end "div" -->
<div style=" width:228px; height:180px; margin-left:12px; float:left; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;font-size:13px;line-height:17px;color:#666666;">
<span class="article"><b style="font-size:14px; color:#000000">Service #2</b></span>
<div style="padding-top:6px;font-size:12px; line-height:18px; color:#333333">Description. <a href="#" class="readmore">Read More</a>
</div> <!-- end "div" -->
</div> <!-- end "div" -->

而不是冗余并创建一个services.html页面，只是说我在index.html上做了同样的事情并包含更多“阅读更多”链接，我想用jQuery做一些事情（因为我是已经使用它+循环用于推荐。）

点击服务链接后，在任何页面上，我希望它转到index.html，滚动到描述服务的两个div，更改背景颜色（变为黄色）强调，然后淡出恢复正常（白色。）

是否有jQuery插件可以执行此操作？或者我该怎么办？我在看bgFader，但由于没有演示，我不确定这是我正在寻找的（我不知道JS。）

修改

@Yi Jiang - 它没用。我将此添加到<head>：

<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<!-- include Color plugin --> 
<script type="text/javascript" src="js/jquery.color.js"></script> 
<script type="text/javascript"> 
if(window.location.hash === '#services') {
    var service = $('#services');
    var originalColor = $('#services').css('background-color');

    $('#services').css('background-color', '#FFEE9F').animate({
        'background-color': originalColor
    }, 1000);
}
</script>

并将id="services"添加到一个div（用于测试）并将我的锚更改为index.html#services。它滚动到正确的位置（谢谢！）但它不会改变背景或做除滚动之外的任何事情。我搞砸了什么吗？

Answer 1

嗯，实际上它很简单。首先，要获取滚动位，可以使用散列指向文档的相关部分。将id添加到您要滚动到的div，例如services，然后使用网址index.html#services获取自动转到主页并滚动到页面的服务部分。

接下来，为了突出显示，您需要使用window.location.hash 来查看您是否指向服务部分。然后我们可以使用jQuery color plugin来获取颜色动画。代码看起来像：

if(window.location.hash === '#services') {
    var service = $('#services');
    var originalColor = $('#services').css('background-color');

    $('#services').css('background-color', '#FFEE9F').animate({
        'background-color': originalColor
    }, 1000);
}

PS：您可能想稍微清理一下HTML。例如，b标记已弃用，不应使用，内联样式也应移动到单独的CSS文件中。

编辑：您需要将所有内容都包装在$(document).ready处理程序中，就像所有jQuery代码一样。否则，更改持续时间，以便返回原始颜色需要更长时间，以便更改更明显，并且颜色插件已正确嵌入：

$(document).ready(function(){
    if(window.location.hash === '#services') {
        var service = $('#services');
        var originalColor = service.css('background-color');

        service.css('background-color', '#FFEE9F').animate({
            'background-color': originalColor
        }, 3000); // Change duration here
    }
});

标签不应该有任何区别（不确定你在这里指的是哪个标签）

jQuery插件滚动页面，更改背景并淡化锚点击？

1 个答案: