Jquery或CSS在 anchor 跳转/滚动上突出显示div

Question

我试图通过单击 anchor 链接来突出显示 div。我的意思是如果我点击<a href="$id1" class="scroll">My link</a>

然后滚动到 <div id="id1">here</div>在此页面上，我有很多 anchor 链接和 div，因此很难识别哪个 div 然后滚动，因此最好突出显示单击的 anchor 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 就足够了

Answer 1

考虑使用 :target CSS 伪元素 -

Demo

Demo with img:target

Check Browser Compatibility