4

ページのブックマーク (mysite.com/mypage.htm#bookmark) にリンクし、ブックマークされたアイテムを視覚的に強調表示したい (おそらく赤い境界線がある)。当然、複数のアイテムがブックマークされます。そのため、誰かが #bookmark2 をクリックすると、その他の領域が強調表示されます)。

.asp または .aspx を使用してそれを行う方法はわかりますが、それよりも簡単にしたいと思います。CSSでそれを行う賢い方法があるのではないかと思いました。

興味がある理由: - すべてのプログラムを一覧表示するショッピング ページにプログラムをリンクさせたい。私はブックマークを使用しているので、特定のプログラム領域 (site.com/shoppingpage#Programx) にジャンプしていますが、わかりやすくするために、リンク先のページを実際に強調表示したいと思います。

4

4 に答える 4

9

あなたのCSSであなたは定義する必要があります

a.highlight {border:1px solid red;}

または同様のもの

次に、jQueryを使用して

$(document).ready ( function () { //Work as soon as the DOM is ready for parsing
    var id  = location.hash.substr(1); //Get the word after the hash from the url
    if (id) $('#'+id).addClass('highlight'); // add class highlight to element whose id is the word after the hash
});

マウスオーバーでターゲットを強調表示するには、以下も追加します。

$("a[href^='#']")
    .mouseover(function() {
        var id  = $(this).attr('href').substr(1);
        $('#'+id).addClass('highlight');
    })
    .mouseout(function() {
        var id  = $(this).attr('href').substr(1);
        $('#'+id).removeClass('highlight');
    });
于 2008-09-10T15:09:37.967 に答える
6

targetCSS で疑似クラスを使用することもできます。

<html>
<head>

<style type="text/css">
div#test:target {
 background-color: yellow;
}
</style>

</head>
<body>

<p><b><a href="#test">Link</a></b></p>

<div id="test">
Target
</div>

</body>
</html>

残念ながら、ターゲットの疑似クラスは IE または Opera でサポートされていないため、ここで普遍的なソリューションを探している場合、これでは不十分な場合があります。

于 2008-09-11T00:05:47.833 に答える
2

お気に入りの JS ツールキットを使用して、アンカーを含む (または含まれる) アイテムに「ハイライト」(または何でも) クラスを追加します。

何かのようなもの：

jQuery(location.hash).addClass('highlight');

もちろん、ページ上の他のリンクによってトリガーされるようにする場合は、onready または click を呼び出す必要があり、.highlight クラスを定義する必要があります。強調表示するコンテナーに応じて、jQuery セレクターを上下にトラバースさせることもできます。

于 2008-09-10T14:54:21.153 に答える
0

ブックマークを記憶する機能のために JavaScript と Cookie を使用してこの情報を保存し、データベースとやり取りしたい場合は Ajax のスプラッシュを追加することもできると思います。

CSS はスタイリングのみを行うことができます。ブックマークされたアンカーに、CSS ファイルにあるクラスを指定する必要があります。

CSS には、ブラウザーの履歴で見つかったリンクのスタイル設定に使用される a:visited セレクターもあります。

于 2008-09-10T14:47:29.643 に答える