タブの切り替え

Question

初心者です。

以下のようなコードでタブを作成中なのですが、
クリックすると一瞬cssが適応されて#ea5455に変わります。
そのあとaタグでリンク先に飛んだ後は元の文字色に変わるような挙動です。

aタグを外すとcssは適応されるので原因はそれだと考えるのですが、
どうすればいいのかわからないため質問しました。

よろしくお願いします。

※現在はaタグがあってもcssは適応されるものが作りたいので、テスト用にコーディングしています。

<script type="text/javascript">
$(function(){
    $(".select").click(function(){
        $('.nselect2').css('color', '#ea5455');
    });
});
</script>
<?php
	echo ' <div class="catetab">'."\r\n";
	echo '  <div class="bigtab"><a href ="index.php?r='.$pIntNo.'&t=1"><span class="select"><img src="img/tab/a.png" alt="" /></span></a></div>'."\r\n";
	echo '  <div class="bigtab"><a href ="index.php?r='.$pIntNo.'&t=2"><span class="noselect"><img src="img/tab/b.png" alt="" /></span></a></div>'."\r\n";
	echo '  <div class="bigtab"><a href ="index.php?r='.$pIntNo.'&t=3"><span class="noselect"><img src="img/tab/c.png" alt="" /></span></a></div>'."\r\n";
	echo '  <div class="smltab"><a href ="index.php?r='.$pIntNo.'&t=1"><span class="select2">aaa</span></a></div>'."\r\n";
	echo '  <div class="smltab"><a href ="index.php?r='.$pIntNo.'&t=4"><span class="nselect2">bbb</span></a></div>'."\r\n";
	echo '  <div class="smltab"><a href ="index.php?r='.$pIntNo.'&t=5"><span class="nselect2">ccc</span></a></div>'."\r\n";
	echo ' </div>'."\r\n";		//	.catetab
?>

Comments

[namimon]

「リンクすると」というのは、タブが切り替わることでしょうか。

[taishi_574]

実際にはcssが適応されないのでタブは切り替わらないのですが、「aタグでリンク先に飛んだ後」ということです。

Answer 1

aタグがあってもリンク先に飛ばなくていいという意味でしょうか？
だとしたら本来はaタグを最初から外すべきです。
もしそうではなくaタグで飛んだ先でcssを有効にしたいということであれば
ちょっとめんどくさそうです。あまり現実的ではないでしょう
（パラメータを渡してphp側でclassを負荷したり）

$(function(){
    $(".select").click(function(e){
      $('.nselect2').css('color', '#ea5455');
      e.preventDefault();
    });
});

Comments

[taishi_574]

後者の方でaタグで飛んだ先でcssを有効にしたいと考えていたのですが、jqueryで実現するのは難しいということでしょうか？

他にやり方があるなら教えていただけると助かります。

[yambejp]

なるほど飛び先のCSSを指定するのですね。
そうなると前回書いたとおり
・パラメータで渡してPHPで該当箇所にclassを付加してcssを実装する
のが妥当です、似たようなやり方で
・cookieなどで渡す
という方法もありますが、前者のほうが実装しやすいでしょう。

お気づきだとは思いますが、適当なCSSを無手順で次のページに
引き継ぐのは無理です。
それができるなら変なページからご自身のページにリンクをたどってきた
場合のページのCSSがぐちゃぐちゃにされると同義になりますので・・・

[taishi_574]

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

やり方はいろいろあるのですね。
教えていただいた方法でやってみます。

考えれば当然でしたね。
それをやられたらすごく困ります。

ご丁寧にありがとうございました。

[taishi_574]

パラメータで判断するcssを追加して解決いたしました。
質問せずにまだjqueryで試行錯誤してたかと思うとゾッとします。

時間があればcookieでも試してみようと思います。

どうもありがとうございました。

Answer 2

クリックではなく、mousedownではどうでしょうか。

$(".select").on("mousedown",(function(){
        $('.nselect2').css('color', '#ea5455');
    })

Comments

[taishi_574]

遅くなり申し訳ありません。

jqueryでの実装はあきらめて、パラメータで分岐するようなcssを追加して解決いたしました。

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