Question

我希望网页的一部分有一个淡入/淡出高亮颜色，该网页被跳转到一个格式为<a href="sectiongoto">Link</a>的链接，其中 sectiongoto 标识名称/ ID元素。

这与点击Stack Overflow收件箱链接的方式相同，表明您有新邮件。当您导航/跳转到相关帖子时，帖子的背景会以橙色色调消失，然后淡出。

如何在我目前正在处理的网站上实施此效果？我使用Firebug查看了SO页面的源代码，但没有看到任何相关的内容。

Answer 1

你可能正在寻找：target psuedo class

我还没有看过SO脚本，但我相当确定fade是一个JavaScript的东西。它可以通过CSS过渡完成，但通常用于悬停/焦点等淡入和淡出的事物。

http://www.w3.org/TR/selectors/#target-pseudo

http://caniuse.com/#search=target

假设你有像这样的样本标记

<ul>
  <li><a href="#target1">Go To 1</a></li>
  <li><a href="#target2">Go To 2</a></li>
</ul>
<div id="target1"><!--Your HTML Here --></div>
<div id="target2"><!--Your HTML Here --></div>

然后你想要这样的CSS

div:target { background-color:orange; }

这样，当您的用户点击列表中的链接时，您的网址会采用哈希码＃target1或＃target2，并且页面中适用的目标现在的背景颜色为橙色。

Answer 2

所以..你需要看的是在URL中使用fragment identifier的概念。

从维基百科条目中提取
  _{*强调是我的}

...片段标识符是引用的短字符串   到属于另一个主要资源的资源。该   主要资源由统一资源标识符（URI）标识，   片段标识符指向从属资源。

我更喜欢将其称为URL哈希标记，因为用于在JavaScript中检索它们的方法是
window.location.hash。称之为你想要的 - 这是解释：

让我以答案的网址为例：
<子>啊哈！但是在发布之前我是如何获得URL的呢？ ;）

https://stackoverflow.com/questions/10017592/highlighting-a-section-of-a-web-page-the-way-so-does-with-inbox-links/10036643#10036643

因此哈希值是URL末尾的#10036643。您可以通过检查window.location.hash变量来获得该值。可以使用相同的语法将元素添加到哈希列表中 -
window.location.hash += "#more_info"

可以轻松创建多个键和值对以存储更多信息：
http://foobar.com/#one=1#two=2#three=3

window.location.hash现在会给我们：#one=1#two=2#three=3
从那里我们可以简单地使用.split()函数和#字符作为分隔符。这应该给你这样的东西：

["", "one=1", "two=2", "three=3"]

从数组中弹出第一个空元素，然后对于每个键/值对，您可以执行额外的.split('=')，或者只是不使用值作为值，只需要像这样的哈希值：
http://foobar.com/post/how-to/#COMMENT_ID

确定，

既然我们知道如何将信息嵌入到URL中，我们就可以开始解析它了。为了这个例子，我们假设一个简单的HTML结构 -

...
<body>
  <div>
    Page Header
  </div>
  <div class="blog_post">
    An interesting section of content.
    <div class="comment cid0" ></div>
  </div>
  <div class="blog_post">
    More fantastic information (and a special offer).
    <div class="comment cid0" ></div>
    <div class="comment cid1" ></div>
  </div>
  <div>
    Page Footer
  </div>
</body>
...

鉴于此网址：http://foobar.com/post/how-to/#cid1
您可以在document.ready函数中使用一些JavaScript来控制绘制焦点的位置 -

$(function(){
  // Extract comment id from URL
  var targetElementId = window.location.hash.split("#")[1]; // This gives us 456
  var targetElement = $(".comment ."+targetElementId);
  var targetElementOffset = targetElement.offset(); 
  $('body').scrollTop(targetElementOffset.top);

  // Insert highlight functionality here
});

关于突出显示，我认为Kerian's answer几乎涵盖了它 - 您需要使用一些与浏览器相关的功能，例如CSS Transitions。你也许也可以摆脱一些替代方案 - 你可以使用这些建议来激发你的想象力 -

将重复的1x1px稍微透明的颜色放在该元素中的所有内容之后，只需使用.fadeOut()函数在一定延迟后隐藏它。
使用background-position
可能会使用background-color回调在某些预定义的setInterval属性中循环

按照SO对收件箱链接的方式突出显示网页的一部分

2 个答案:

确定，