Javascriptで現在のページ番号をアクティブな状態にしたい

質問

今、PHPにて動的に変わるページリンクを作成しています。
====================================
前のページ 1 2 3 4 5 次のページ
====================================

これをリストの上部と下部に設置し連動して動くようにしたいと思っています。

リンクを生成する部分はpagelink_inc.phpという外部ファイルにして、それぞれの箇所でインクルードしています。

■HTML本体
<div class="pageLink">
include(include/pagelink_inc.php); //リンク生成のPHPを読み込む
</div>

<div id="contents">
コンテンツ内容
</div>

<div class="pageLink">
include(include/pagelink_inc.php); //リンク生成のPHPを読み込む
</div>

■pagelink_inc.php
<?php
$linkStart = (($pageNo * 2) > constant("SHOW_LINK_NUM")) ? $pageNo-(floor(constant("SHOW_LINK_NUM")/2)) : 0;

if($pageNo > 0 && $pageNo < $pages) echo "<a href='shopping.php?p_no=".($pageNo-1)."'>前のページ</a>\n";

for($i=$linkStart; $i<($linkStart+constant("SHOW_LINK_NUM")); $i++) {
if($i < $pages) {
echo "<a href='shopping.php?p_no=".$i."'>".($i+1)."</a>\n";
}
}

if($pageNo >= 0 && $pageNo < $pages-1) echo "<a href='shopping.php?p_no=".($pageNo+1)."'>次のページ</a>\n";
?>

実際はこれだけで問題なく動くのですが、ユーザビリティを考慮し
1．現在どのページが開いているのかが分かるように、番号のスタイルを太字でボーダー無し、フォントカラーをグレーにする。
2．ページが開いた直後は1のリンクが対象になるようにする。
の2点を実現したいと思っています。

そこで、echo "<a href='shopping.php?p_no=".$i."'>".($i+1)."</a>\n";の部分にid='p_no".($i)."'を加え
==============================================================================
echo "<a href='shopping.php?p_no=".$i."' id='p_no".($i)."'>".($i+1)."</a>\n";
==============================================================================
のようにしました。

更に、HTMLの</body>の前に
==============================================================================
<script type="text/javascript">nowPage("<?php echo $pageNo; ?>")</script>
==============================================================================
を加え
==============================================================================
<script type="text/javascript">
function nowPage(no) {
var elem = document.getElementById("p_no"+no);
elem.style.textDecoration = 'none';
elem.style.fontWeight = 'bold';
elem.style.color = '#333333';
}
</script>
==============================================================================
というスクリプトを作成しました。

これだとid名が被ってしまうためか、上部に設置したリンクのスタイルだけが変化し
下部のリンクのスタイルは変化しません。

連動して上記のことを実現するにはどのようにしたらいいでしょうか？
お分かりの方がいらっしゃいましたら是非ご教授下さい。

大変厚かましいのですが、少々急ぎなので、「1から～を勉強して下さい」といった
ご回答はご遠慮したいと思います。
答えが分かってからじっくり勉強させて頂きます。

以上、宜しくお願い致します。

回答No.1

fujillin · ベストアンサー

phpはよく知りませんけれど…

基本的にidが重複することは不可です。（エラーにならないかも知れませんが）
一つしかないはずのものなので、getElementByIdで複数の要素を取得することはできません。

質問を読む限り、わざわざjavascriptを使用しなくても（スクリプトオフのユーザもいることですし）、phpで出力する時にその部分だけリンクをはずして
　style="color = '#333333'; fontWeight = 'bold';"
のような設定をしてあげるようにしたほうが良いのでは？

あるいは、該当ページの部分だけ
class="gray"
みたいに指定しておいて、CSSで
.gray {　text-decoration: one;　color = '#333333'; fontWeight = 'bold';　}
などでも良いですね。（これもスクリプト不要）

どうしてもDOM操作でやりたいのなら、class="pageLink"のDIVを取得してそのなかから該当するページを探してあげればよろしいかと…
var i, j, a, div = document.getElementsByTagName('DIV');
for (i=0; i<div.length; i++) {
　　if (div[i].className == 'pageLink') {
　　　a = div[i].getElementsByTagName('A');
　　　for (j=0; j<a.length; j++) {
　　　　if (a[j].href.replace(/^.+?\?/,'') == 'p_no=' + no) a[j].className = 'gray';
　　　}
　　}
}

お礼

fujillin様

早速のご回答ありがとう御座いました！
アドバイスを元に自分なりにスクリプトを書いてみたところ
無事実現する事ができました。
==========================================================
function nowPage(no) {
　var contents = document.getElementById("blkList");
　var a = contents.getElementsByTagName("a");
　for(var i=0; i<a.length; i++) {
　　var childs = a[i].childNodes;
　　for(var n=0; n<childs.length; n++) {
　　　var val = a[i].childNodes[n].nodeValue;
　　　if(val == no) {
　　　　a[i].style.textDecoration = "none";
　　　　a[i].style.fontWeight = "bold";
　　　　a[i].style.color = "#333";
　　　}
　　}
　}
}
==========================================================
クラス名は使わず、親である<div>（blkList）要素からa要素を拾い、
さらにその子要素の値を、引数であるページ番号と比較して
同じならスタイルを変更するといった手法を取りました。

これを機にもっとDOMを勉強しようと思います。

この度は本当にありがとう御座いました。

回答No.2

fujillin

#1です。　CSSの部分の記載がメチャクチャになってました。

.gray { text-decoration: none; color: #333333; font-weight: bold; }