Question

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

滚动到<div id="id1">here</div>在这个页面上我有很多锚链接和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就足够了

Answer 1

考虑使用:target CSS伪元素 -

Demo

Demo with img:target

Check Browser Compatibility

Answer 2

哦，好吧，我想我得到了你想做的事情：你想滚动到链接中引用的元素并将一个样式应用于这个元素（BTW，它是# <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而不是$。

Jquery或css突出显示div跳转/滚动

2 个答案: