Hatena::Grouporera

USOperaION/ε∂.∂з\ このページをアンテナに追加 RSSフィード

perl + MySQL で動く CMS W.S.O(うそ)作ってみました 使ってくれる人探してます工房らくだ舎
 | 

2006年11月10日(金)

[][]:target 疑似クラスでごにょごにょの解 :target 疑似クラスでごにょごにょの解 - USOperaION/ε∂.∂з\ を含むブックマーク はてなブックマーク - :target 疑似クラスでごにょごにょの解 - USOperaION/ε∂.∂з\ :target 疑似クラスでごにょごにょの解 - USOperaION/ε∂.∂з\ のブックマークコメント

CSS3 の target 疑似クラスで脚注を動的に表示する - lucky bagピュア CSS なプレゼン用スライドショー - lucky bagでのスクリプトですが、 sfEls[i].className+=" " + cls ;sfEls[i].className+=" sftarget"; と修正して、 :target 疑似クラスと、 .sftarget クラスのスタイルを以下のように別々に書けば Opera でも動作するようです。

div.sftarget
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
div:target
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

っていうか、後者のピュア CSS のプレゼンは Opera の場合、 Opera Show 用の CSS 書けばいいんだけどね。

ところで、 sfEls[i].className+=" " + cls ; の部分は、 IE でもエラーになります。たぶん、変更部分のクラス名を引数で受け取って汎用性を持たせるつもりだったのではないでしょうか。

あと、正規表現の所の \\b (バックスペース)とか意味不明。と言うわけで、私的に美しいコード。

<code>
sfTarget = function (cls)
{
	var sfEls=document.getElementsByTagName("div");
	var aEls = document.getElementsByTagName("a");
	document.lastTarget = null;
	for (var i=0; i<sfEls.length; i++)
	{
		if (sfEls[i].id)
		{
			if (location.hash==("#" + sfEls[i].id))
			{
				sfEls[i].className = Array(sfEls[i].className,cls).join(" ");
				document.lastTarget=sfEls[i];
			}
			for (var j=0; j<aEls.length; j++)
			{
				if (aEls[j].hash==("#" + sfEls[i].id)) aEls[j].targetEl = sfEls[i]; aEls[j].onclick = function()
				{
					if (document.lastTarget) document.lastTarget.className = document.lastTarget.className.replace(new RegExp(" *" + cls + " *"), "");
					if (this.targetEl) this.targetEl.className = Array(this.targetEl.className,cls).join(" "); document.lastTarget=this.targetEl;
					return true;
				}
			}
		}
	}
}
loadSfTarget = function()
{
	sfTarget("sftarget");
}
if (window.attachEvent) window.attachEvent("onload", loadSfTarget);
</code>
トラックバック - http://orera.g.hatena.ne.jp/usopion/20061110
 |