今、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ベストアンサー
- 回答日時:
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
- 回答日時:
#1です。
CSSの部分の記載がメチャクチャになってました。.gray { text-decoration: none; color: #333333; font-weight: bold; }
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- PHP PHP MySql ページング 2 2022/09/20 06:38
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
クリックで色変更後に既に変更...
-
createElementが一瞬で消えてし...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
指定したパスが現URLに含まれて...
-
innerHTMLの初期値
-
Jquery 親要素で順番入れ替え
-
JSで動的にリンクを作成
-
変数内容をHTML内で表示する方法
-
createElementで作成した要素を...
-
jqueryを使って無駄なspanタグ...
-
removeEventListenerについて
-
innerHTMLに入れたリンクが反応...
-
Notice:Undefined index が。
-
checkboxにチェックを入れると...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
文字列より<・・・>を削除す...
-
removeAttribute()メソッドで削...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
HTMLタグに複数のクラスを設定...
-
変数名をどのようにつけるのが...
-
401エラードキュメントを401.ht...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
タブで開いてさらにタブ内をア...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
HTMLとJavaScriptで作ったタイ...
-
getElementByIdの戻り値がnull...
-
指定したパスが現URLに含まれて...
-
[急ぎ] videoタグで埋め込んだm...
-
IFRAMEの表示/非表示を切り替え...
-
iframe内のリンクが飛ばないの...
-
removeAttribute()メソッドで削...
-
背景色を透明化
-
jQueryで同じid属性が複数あっ...
おすすめ情報