jQuery或CSS如何在锚点跳转/滚动时突出显示div？

Question

我想通过单击锚链接来突出显示div。我的意思是，如果我单击My link，那么它将滚动到

here

。在此页面上，我有很多锚链接和div，因此很难确定滚动到哪个div，因此最好在单击的锚点div上突出显示边框。我尝试了下面的代码，但它不起作用。

<script type="text/javascript"> 
        // anchor click jump scroll
        jQuery(document).ready(function(jQuery) {

            jQuery(".scroll").click(function(event){        
                event.preventDefault();
                jQuery('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
            });
        });

        jQuery(".scroll").click(function() {
           jQuery("#post-<?php echo get_the_ID(); ?>").css("border", "1px solid #ff0000").delay(1000).css("border", "none");
        };
    </script>

我不确定是否需要使用jQuery UI，或者只用jQuery就足够了。

- Code Lover

---

它不需要jQuery UI，只需要jQuery。但我不明白为什么你会两次订阅click事件，而且在两个不同的时刻（一个是内联的，另一个是DOM准备好时）。 - Samuel Caillerie

因为我不是专家，只是在尝试学习jQuery，所以不知道如何使用它。 - Code Lover

Answer 1

考虑使用 CSS 伪元素:target -

演示文档：Demo 带图片的演示：Demo with img:target 检查浏览器兼容性：Check Browser Compatibility

- Dipak

---

这是一个好主意，但它在IMG上不起作用。我已经写了像img:target这样的CSS，这样对吗？ - Code Lover

啊！这里又有一个疑惑。你是在使用jQuery还是只用CSS？ - Code Lover

好的，我找到了CSS而不是jQuery的问题所在。我的意思是，当我使用滚动条来定位时，它没有考虑CSS，因此我必须通过jQuery来更改CSS。 - Code Lover

伟大的纯CSS解决方案！ - L84

Answer 2

好的，我明白你想做什么了：你想滚动到链接中引用的元素，并对该元素应用样式（顺便说一下，在 <a href="#id1"> 中的 # 是一个锚点）。

代码应该改为：

jQuery(document).ready(function() {
    jQuery(".scroll").click(function(event){
        var $target = jQuery(this.hash);

        event.preventDefault();
        jQuery('html,body').animate({scrollTop:$target.offset().top}, 500);
        $target.css("border", "1px solid #ff0000").delay(1000).css("border", "none");
    });
});

为了使用jQuery而进行编辑，而不是$。

- Samuel Caillerie

---

谢谢更新，但现在它的行为有些奇怪。有时它会滚动，有时会跳跃，当它滚动时不会高亮，但当跳跃时会高亮。 - Code Lover

我尝试了，但现在完全停止响应。我不明白它出了什么问题。 :( - Code Lover

呃，事实上 delay 只对已排队的动画效果有效，而不适用于 CSS 样式。对于这种情况，你应该使用原生的 setTimeout。我创建了一个 jsfiddle。 - Samuel Caillerie

非常感谢您的帮助，但是在 jsfiddle 上更新的代码已经停止滚动了。不过它仍然可以突出显示边框。 - Code Lover

事实上，你需要同时使用 html 和 body：body 在火狐浏览器中不起作用，而 html 在谷歌浏览器中不起作用... 更新的 fiddle。 - Samuel Caillerie