jQueryの質問です。
$(function() {
var url = "url.php";
var id = "#id-spc";
$.ajax({
url: url,
cache: false,
success: function(html){
$(id).html(html);
}
});
$('li.hide-tab').on({
"click": function(){
$(this).removeClass('hide-tab').addClass('now-tab');
$("li.now-tab").not(this).removeClass('now-tab').addClass('hide-tab');
var url2 = "url2.php";
$.ajax({
url: url2,
cache: false,
success: function(html){
$(id).html(html);
}
});
}
});
});
上記の内容はページ内の<li>をクリックすると、クリックされた<li>以外の背景を変えるということを実現させるつもりで書いたものですが、1回は切り替わりますが、now-tabからhide-tabに変わった<li class="hide-tab">をクリックしても<li class="now-tab">になりません。
どこに間違いがあるかご教授願います。
※ajaxによる内容変更は、テキトウな内容で今回の質問とは関係ありません。
ベストアンサー
-
a-kuma3
満足100pt
jsFiddle で、質問にあるコードを試してみたのがこちらです。
https://jsfiddle.net/moqknvrv/
Ajax による内容変更は質問と関係ない、ということなので該当する部分をコメントアウトして、HTML と CSS を適当に書いてます。
期待通りに動いているんじゃないでしょうか。
実際にうまくいかないと悩んでいるコードと、質問に書いたコードは違っていると思いますが、- エッセンスを取り出したつもりが、うまくいかない原因まで取り除いてしまった
- 関係ないと思っている Ajax から内容変更の部分が影響している
- 使ってるjQuery のバージョンが古い
というようなあたりが、うまくいかない原因なのではないかと想像します。
a-kuma3その他の回答
-
khaie
自己解決というか、以下の内容で納得することにしました。
LIのクラスには、デフォルト表示用にnow-tabをあらかじめ与えてありましたが、これがあると動かないようでした。
LIすべてにクラス「hide-tab」を付し、デフォルト表示用に別途「default-tab」を付け、now-tabと同内容のCSS値とします。そしてclickのfunction内に以下を付け足しました。
$("li.default-tab").removeClass('default-tab');
https://jsfiddle.net/moqknvrv/41/
ということで、この質問に長くお付き合いいただいたa-kuma3にポイントを差し上げて終了したいと思います。
この質問へのコメント
質問の情報
- 登録日時
- 2015-05-28 18:48:51
- 終了日時
- 2015-05-29 02:55:14
- 回答条件
- 1人1回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
https://hikky-mura.org/t/topic/2523/7 でsma200さんという方に戸塚ヨットスクールを勧められましたが、僕…
hayakushinene
1
-
親族（実家）の犬が無駄吠えをしています。朝方に一時間くらい吠えているらしい。昼にも一時間くらい吠え続…
匿名質問者2
2
1
-
度々すみません。 私は以前から大学入試・成績など教育関連のネガティブな夢を見ていましたが、ここ最近そ…hayakushinene15
-
いつもお世話になっています。 自分、インセル予備軍かもしれません。 街中でカップルや夫婦等見ると羨まし…hayakushinene
-
学歴詐称ではなくて、貴族称号詐称について伺います。イボンヌの香りという映画で、ロシアの伯爵を詐称して…匿名質問者