JavaScript｜ページ分割用の共通ブログパーツで現在のURL分だけリンク削除

例は現在「記事5」を読んでる場合の表示。また、以下は例なので表内のリンク先は全部架空のURL。押しても反応しません。

～ここからデバッグ表示

～ここまでデバッグ表示

まずURL規則を決めた方が

関連記事として並べるURLの規則は以下。これはJavaScriptで何とでもできるものではありますが、シリーズ記事ならシリーズらしいパーマネントアドレスにしておくと何かと楽です。

HTMLソースはこう

面倒なのでcssも<style>タグ中に書いてあります。内容は“現在のURLはこれと知らせるためのNow表示”のスタイル。上下のスペース調整に苦労してますが。

<style>.now {
/*visibility:hidden;*/
 display:none;
 color:#cc0000;
 font-weight:bold;
 font-size:x-small;
 margin-top:-1em;
 padding-top:0.2em;
 margin-bottom:-0.5em;
}</style>
<table style="border-style:solid;border-width:2px;table-layout:fixed;width:100%;">
<caption>シリーズ物記事のリンク表</caption>
<tbody>
<tr style="text-align:center;height:55px;">
<td id="s1"><a href="/seisaku-s1.html" onClick="return false;">記事1</a><br /><span class="now">Now</span></td>
<td id="s2"><a href="/seisaku-s2.html" onClick="return false;">記事2</a><br /><span class="now">Now</span></td>
<td id="s3"><a href="/seisaku-s3.html" onClick="return false;">記事3</a><br /><span class="now">Now</span></td>
<td id="s4"><a href="/seisaku-s4.html" onClick="return false;">記事4</a><br /><span class="now">Now</span></td>
<td id="s5"><a href="/seisaku-s5.html" onClick="return false;">記事5</a><br /><span class="now">Now</span></td>
<td id="s6"><a href="/seisaku-s6.html" onClick="return false;">記事6</a><br /><span class="now">Now</span></td>
<td id="s7"><a href="/seisaku-s7.html" onClick="return false;">記事7</a><br /><span class="now">Now</span></td>
</tr>
</tbody>
</table>
<span class="nbare">～ここからデバッグ表示</span><br />
<div id="debug"></div>
<span class="nbare">～ここまでデバッグ表示</span><br />

<table>タグ内にリンク先<a>タグと改行<br />と表示用<span>タグを並べてあります。

で、JavaScriptでid=””を付けられた表内の<td>タグを指定し、その子要素である<a>タグ、<span>タグに対し指令を出し制御します。

同一id名が複数あるとハングアップしてしまうJavaScriptですが、こうするとid=””は1か所だけでよい構成になり、名付けに悩む必要もなくなります。

これがページ分割用JavaScriptソース

JavaScriptのソースが以下。これはテスト用なので1行目がコメントアウト、2行目にデバッグ用URLの文字列→実使用時は入れ替え。

	//	var url=location.href;
		var url='/movie/oitnb/recall-s5.html';
		var tmp = url.split('/recall-');
		var n_atag = 0;
		var n_disp = 2;

	if (tmp[1] != null) {
		var tmp2 = tmp[1].split('.html');
		var id = tmp2[0];
document.getElementById('debug').innerHTML += id+'<br />';

		var td = document.getElementById(id);
//全子要素の.textContentをデバッグ表示
	var count = td.childElementCount;
	for(var i=0; i<count; i++) {
document.getElementById('test').innerHTML += i+'：'+td.children[i].textContent+'<br />';
	}
		var atag = td.children[n_atag];
		var disp = td.children[n_disp];
//document.getElementById('test').innerHTML += atag+'<br />';
//document.getElementById('test').innerHTML += disp.style.display+'<br />';
	//	disp.style.visibility = 'visible';
		disp.style.display = 'block';
	//href属性の値を書き換える
		atag.setAttribute('href','javascript:void(0)');
	//	atag.setAttribute('href','');//勝手に付いちゃう
		atag.style.color='#666';
	//	atag.style.text-decoration='none';//undefined variableエラー
	//	atag.addEventListener('mouseover',function() {
	//	});
	}
document.getElementById('debug').innerHTML += '<br />JS終了到達';

JavaScriptの仕事＝id計算

ここではURL内の末尾部分をid名としたので、それを抜き出すプログラム。.splitメソッドを使ってURLから不要な前後を取り除き、それでid名に一致する文字列を取り出しています。

• 変数tmp[0]とtmp[1]にそれぞれ空白、s5.htmlが代入。
• 変数tmp2[0]にs5が代入←これがid名と一致。

うちのサイトは必ず末尾が.htmlなので上記のように。WordPressの場合、通常は/なのかな？その辺は適宜修正下さい。

注意点

JavaScriptの仕事＝指定idの子要素取得

これが1カ所だけのid記述でエレメントを指定するミソ。

変数tdに指定したidのエレメントを代入。それの子要素を14～17行目で全部表示しています。

id=”debug”領域に表示された内容で分かりますが、最初の<a>タグが要素番号0、3番目の<span>タグが要素番号2に入ってることが分かります。多分要素番号1には改行。

それが分かったら、変数atagにtd.children[0]、変数dispにtd.children[2]を代入。ソース中では変数n_atag、n_dispに定義。

これら子要素であるエレメントに対し、次項でリンクの削除とcss制御を行います。

JavaScriptの仕事＝リンク削除とcss操作

変数dispのstyle.displayはHTML内で指定されたnoneですが、ここで23行目のようにblockに書き換えます→消されてたNow表示が出現。

次に変数atagのリンク先削除。25行目のようにhref要素をjavascript:void(0)に書き換えます。

意味はJavaScriptに「常にUndefinedを返せ」←要は「何もすんな」。26行目のように空にするとブログサービス・WordPressが勝手に自記事のURLを付加しちゃうので。

その他、27行目でリンクの文字色を変えています。それ以降のコメントアウト部分はあまり意味がなかった部分。