4

我试图通过单击锚链接来突出显示 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 就足够了

4

2 回答 2

6

考虑使用:targetCSS 伪元素 -

演示

带有 img:target 的演示

检查浏览器兼容性

于 2012-10-16T09:59:42.127 回答
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而不是$.

于 2012-10-16T10:02:57.927 回答