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

わかりました。やりたいことがわかったと思います。リンク内の参照されている要素までスクロールして、この要素にスタイルを適用します（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ではなく使用するために編集されました$。

于 2012-10-16T10:02:57.927 に答える