Question

我正在一家餐馆的网站上工作，由于菜单页面有些广泛（我将整个菜单放在网站上，因为它不经常更改），我在顶部添加了一些跳转的链接特定部分。即便如此，靠近底部的部分也有些短，而且告诉你实际上跳到哪一部分可能很棘手。为标题设置一个：目标选择器是可行的，但我不喜欢这样一个事实，即我用来区分标题的任何效果都不会消失。

当一个元素被内部链接作为目标时，是否可以使用jQuery对元素应用“黄色淡入淡出”效果，这样你就可以知道你跳到哪里但它不会留在那里并使页面混乱？ / p>

Answer 1

我在下面的方式包括使用jQuery-ui库，特别是$("#something").effect("highlight", "slow");

这将导致jQuery选择的任何颜色的短暂颜色脉冲。对于您的解决方案，您需要在单击目录后短暂地激活Anchor的标题元素。

<a href="#someTarget" class="tableOfContents">good food</a>
....html

<a id="someTarget">Good Food</a>
<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"/>
<script>
 $(document).ready(function(event){
  $(".tableOfContents").click(function(event){
     $($(this).attr("href")).effect("highlight", "slow");
   });
});
    </script>

Answer 2

我不确定为什么通过将其交给JavaScript来使事情复杂化;不可否认，它允许一致的跨浏览器支持，但大多数浏览器（with the obvious exception of IE）应该可以使用:target pseudo-class，这允许纯CSS方法：

HTML：

<a href="#link">Go to text</a>

<div id="link">
    <p>Lorem ipsum dolor sit amet, and so forth.</p>
</div>

CSS：

div {
    display: none;
}

div:target {
    display: block;
    background: #fff url(path/to/animated.gif) 0 0 repeat;
}

JS Fiddle demo

内部链接有黄色淡化效果？

2 个答案:

HTML：

CSS：