1

リンクが内部ページか外部ページかを判断するために、正規表現を使用しています。リンクが外部ページへのリンクである場合、リンクに外部ページ アイコンを付加するクラスが割り当てられます。正規表現は次のとおりです。

//Identify external links
jQuery("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external");
//Append span to display Icon
jQuery('#content1 a.external').append('<span class="external_link" />');

CSS を使用して、問題のリンクが訪問されたかどうかに応じて適用されるアイコンを変更できますか? [つまり、リンク自体の動作と同じように、リンクが訪問された場合、外部リンク アイコンは別の色になります]

CSSでできるとは思えません。私の推論は、リンクが訪問されたかどうかに関係なく、jQuery はリンクの種類に基づいてクラスを割り当てるということです。したがって、疑似クラス :visited を jQuery 正規表現によって作成された span クラスに割り当てる方法はありません。

しかし、私が考えていない素敵な CSS のトリックを誰かが知っているかもしれません。

訪問されていないアイコンのCSS（スプライトです）：

span.external_link { 
background: url(/hslc/global/icons/icon-external.gif) no-repeat scroll left top transparent; 
display: inline-block; 
height: 10px; 
line-height: 16px; 
margin: 0 0 0 0.25em; 
padding: 0; width: 10px; }

機能しない、訪問したバージョンのアイコンの CSS :

a:visited span.external_link { background-position: 0 -100px }

このページには、見たい場合の例が含まれています。ビデオのすぐ下にあるリンクは、その機能を実行している外部リンク アイコンを示しています... http://eclkc.ohs.acf.hhs.gov/hslc/tta-system/teaching/center/practice/ISS/zone.html

ありがとう！

コメントで BoltClock のリンクを使用すると、背景画像を使用してアクセスしたリンクのスタイルを変更できないことがわかりました。カラーが使用できます。そこで、以下の男爵のソリューションと X + Y セレクターを使用してこれを記述しました。

span.external_link::after  { 
content:    "<- unvisited!"; 
color:      green; }  

a:visited + span.external_link::after {  
content:    "<- visited!"; 
color:      red; }

緑/未訪問のテキストしか表示されません。私は赤く/訪問して現れることができません

私はこの正確なCSSをいじりました。誰かが私が間違っているところを指摘できますか? 私は決して赤く/訪問して申請することはできません。 http://jsfiddle.net/Lera/zLyMn/4/

4

2 に答える 2

1

次のように、隣接するセレクターでそのスパンを選択できるはずです。

a:visited + span.external_link { }

ここを参照してください: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

于 2013-09-16T17:03:43.937 に答える
0

あなたができる最善の方法は、リンクのいくつかのcssプロパティを比較して、訪問したリンクのスタイルを持っているかどうかを比較し、これを反映するために必要なものを調整することです:

CSS:

a:visited { color: red;}

JS:

if($("a").css("color") == "rgb(0, 0, 238)") {
    $("div").text("Link was visited");
}

フィドルを確認してください：

JSFIDDLE

于 2013-09-16T17:02:30.313 に答える