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による内容変更は、テキトウな内容で今回の質問とは関係ありません。

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2015/05/29 02:55:14
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153

ポイント100pt

jsFiddle で、質問にあるコードを試してみたのがこちらです。
https://jsfiddle.net/moqknvrv/

Ajax による内容変更は質問と関係ない、ということなので該当する部分をコメントアウトして、HTML と CSS を適当に書いてます。
期待通りに動いているんじゃないでしょうか。

実際にうまくいかないと悩んでいるコードと、質問に書いたコードは違っていると思いますが、

  • エッセンスを取り出したつもりが、うまくいかない原因まで取り除いてしまった
  • 関係ないと思っている Ajax から内容変更の部分が影響している
  • 使ってるjQuery のバージョンが古い

というようなあたりが、うまくいかない原因なのではないかと想像します。

他9件のコメントを見る
id:a-kuma3

LIのクラスには、デフォルト表示用にnow-tabをあらかじめ与えてありましたが、これがあると動かないようでした。

ああ、なるほど。
click のイベントハンドラを定義しているのは li.hide-tab だけだから、最初に now-tab のタブをクリックしても反応がないと。
click のイベントハンドラは now-tab でも動くので、こんな風にしてみても。

    $('li.hide-tab, li.now-tab').on({   // ★ここ
        "click": function(){
            $(this).removeClass('hide-tab').addClass('now-tab');
            $("li.now-tab").not(this).removeClass('now-tab').addClass('hide-tab');
                ...
2015/05/29 08:53:18
id:khaie

終了後にありがとうございます。
最初に付してないと動かないというところが、内部動作的に理解できていませんが、今回の質問でひとつの知識となりました。

2015/05/29 17:36:45

その他の回答0件)

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153ここでベストアンサー

ポイント100pt

jsFiddle で、質問にあるコードを試してみたのがこちらです。
https://jsfiddle.net/moqknvrv/

Ajax による内容変更は質問と関係ない、ということなので該当する部分をコメントアウトして、HTML と CSS を適当に書いてます。
期待通りに動いているんじゃないでしょうか。

実際にうまくいかないと悩んでいるコードと、質問に書いたコードは違っていると思いますが、

  • エッセンスを取り出したつもりが、うまくいかない原因まで取り除いてしまった
  • 関係ないと思っている Ajax から内容変更の部分が影響している
  • 使ってるjQuery のバージョンが古い

というようなあたりが、うまくいかない原因なのではないかと想像します。

他9件のコメントを見る
id:a-kuma3

LIのクラスには、デフォルト表示用にnow-tabをあらかじめ与えてありましたが、これがあると動かないようでした。

ああ、なるほど。
click のイベントハンドラを定義しているのは li.hide-tab だけだから、最初に now-tab のタブをクリックしても反応がないと。
click のイベントハンドラは now-tab でも動くので、こんな風にしてみても。

    $('li.hide-tab, li.now-tab').on({   // ★ここ
        "click": function(){
            $(this).removeClass('hide-tab').addClass('now-tab');
            $("li.now-tab").not(this).removeClass('now-tab').addClass('hide-tab');
                ...
2015/05/29 08:53:18
id:khaie

終了後にありがとうございます。
最初に付してないと動かないというところが、内部動作的に理解できていませんが、今回の質問でひとつの知識となりました。

2015/05/29 17:36:45
id:khaie

質問者から

khaie2015/05/29 11:11:47

自己解決というか、以下の内容で納得することにしました。

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にポイントを差し上げて終了したいと思います。

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません