タブ画像の切り替え

Question

プログラム初心者です。
PHPでタブと$_REQUESTを使ったシステムを作成しています。
ですが、うまく表示されません。

イメージはこんな感じです。
ページとしては、上の12個のボタンがr=0で下のABCがt=0です。

###発生している問題・エラーメッセージ

タブは画像での実装になるので、javascriptのクリックイベントで
画像をクリックされたらURLの末尾に_0を付け加えて表示するというものです。
下のコードは何度も使っていたのですが、今回$_REQUESTで引数を利用するページを作ろうとすると上手くいきません。
javascriptは常に起動しているという解釈だったのですが違うのでしょうか？
下のJSのコードでhoverイベントにすると問題なく動きますし、clickイベントも一瞬画像が切り替わって
元の画像に戻るという状況です。

お知恵をお貸しいただけると幸いです。

###該当のソースコード

$pIntRno=@$_REQUEST['r'];
$pIntTabno=@$_REQUEST['t'];



//javascript
$(function(){
    var handler = $('ul#nav li a');
    // ウィンドウを開いた時のタブの位置
    var url = document.URL;
    var urlId = url.substr(url.lastIndexOf('#'));
    var urlIdJudgment = urlId.lastIndexOf('#');
    $('ul#nav').each(function(){
        $('#tab-box > div:first').show();
            var imgSrc = $('ul#nav li:first img').attr('src');
            var imgDot = imgSrc.lastIndexOf('.');
            var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
            $('ul#nav li:first img').attr('src',onSrc).addClass('tab-on');

    handler.click(function() {
        // クリックしたタブ画像をオンの状態に
        var imgSrc = $(this).children('img').attr('src').replace(/_o/g, "");
        var imgDot = imgSrc.lastIndexOf('.');
        var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
        $(this).children('img').attr('src',onSrc);

    })
});


//PHP 
<div id="tab-box">
<ul id="nav">
<?php
for($i=1;$i<=12;$i++){
		echo '<li class="r_tab_Btn r_tab_e"><a href ="index.php?r='.$i.'&t='.$pIntTabno.'"><img src="img/Btn/'.$i.'R_e.png">';
}
?>
</ul>

/*   コンテンツ    */


</div>

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
php-5.4.36
jquery-1.8.3.min

Comments

[yambejp]

PHP表示の部分に、他のHTMLの部分も付加したほうがよいでしょう

[kei344]

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、$_REQUESTが見当たりません。

Answer 1

リンクをクリックしたら画像がかわるのですよね？
でもリンクなので次のページに移動しちゃうので画像がかわる意味があるのでしょうか？

Comments

[taishi_574]

回答ありがとうございます。

イメージを
ページは同じものなのですが、rとｔで表示する内容を変えるイメージです。

Answer 2

handler.click(function() {
	// クリックしたタブ画像をオンの状態に
	var imgSrc = $(this).children('img').attr('src').replace(/_o/g, "");
	var imgDot = imgSrc.lastIndexOf('.');
	var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
	$(this).children('img').attr('src',onSrc);
	return false;		// これが無ければページを移動してしまう（してもいいならURLをそれにあったものに最初からしておく必要がある）
} );

あと、エスケープしないと好きな文字列を埋め込めてしまいます。

echo '<li class="r_tab_Btn r_tab_e"><a href ="index.php?r='.$i.'&t='.htmlspecialchars( $pIntTabno, ENT_QUOTES, 'UTF-8' ).'"><img src="img/Btn/'.$i.'R_e.png">';

【$_GET, $_POSTなどを受け取る際の処理 - Qiita】
http://qiita.com/mpyw/items/2f9955db1c02eeef43ea

---

追記：

<?php 
$pIntTabno = filter_input( INPUT_GET, 't', FILTER_VALIDATE_INT ); ?>
<div id="tab-box">
<ul id="nav">
<?php 
for( $i = 1; $i <= 12 ; $i++ ) {
	echo '<li class="r_tab_Btn r_tab_e"><a href ="index.php?r='.$i.'&t='.$i.'"><img src="img/Btn/'.$i.'R_e';
	if ( $i === $pIntTabno ) {
		echo '_o';
	}
	echo '.png">';
} ?>
</ul>

【PHPでGET・POSTを取得する（filter input()） - wiki - PCスキルの小技・忘却防止メモ】
http://tips.recatnap.info/wiki/PHPでGET・POSTを取得する（filter_input()）

---

追記2：

こういうこと？

$rInt = (int) filter_input( INPUT_GET, 'r', FILTER_VALIDATE_INT );
$tInt = (int) filter_input( INPUT_GET, 't', FILTER_VALIDATE_INT );
if ( $rInt === 0 ) { $rInt++; }
if ( $tInt === 0 ) { $tInt++; }
 ?>
<div id="tab-box">
<ul id="r_nav">
<?php 
for( $i = 1; $i <= 12 ; $i++ ) {
    echo '<li class="r_tab_Btn r_tab_e"><a href ="index.php?r='.$i.'&t='.$tInt.'"><img src="img/Btn/'.$i.'R_e';
    if ( $i === $rInt ) {
        echo '_o';
    }
    echo '.png">';
} ?>
</ul>
<ul id="t_nav">
<?php 
for( $i = 1; $i <= 3 ; $i++ ) {
    echo '<li class="r_tab_Btn r_tab_e"><a href ="index.php?r='.$rInt.'&t='.$i.'"><img src="img/Btn/'.$i.'T_e';
    if ( $i === $tInt ) {
        echo '_o';
    }
    echo '.png">';
} ?>
</ul>

Comments

[taishi_574]

回答ありがとうございます。

画像は切り替わったのですが、aタグが効かなくなってしまいました。。。
＞URLをそれにあったものに最初からしておく必要がある
というのはページをタブの数だけ用意するということでしょうか？

[kei344]

> aタグが効かなくなってしまいました
はい。質問タイトルにあった「画像の切り替え」を優先したためです。

現在書かれているhandler.clickはリンクで移動するなら必要ない関数です。

index.php?r=0&t=0 の「t」がタブなのであれば、ページを表示する時点でどこが開いているタブかわかるはずなので、JavaScriptで画像パスを書き換えなくても良いのではないでしょうか。

後で回答に追記します。

[taishi_574]

すみません。僕の質問の書き方がよくなかったです。。。

書いてくれた方法でやってみます。

イメージを追加しました。
ページとしては、上の12個のボタンがr=0で下のABCがt=0です。

Answer 3

#自己解決しました
javascriptはあきらめてパラメータで渡した値でcssを分岐させるような方法で実装しました。

回答いただいた方々ありがとうございました。