$(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による内容変更は、テキトウな内容で今回の質問とは関係ありません。
No.1
4973
2154
100pt
jsFiddle で、質問にあるコードを試してみたのがこちらです。
https://jsfiddle.net/moqknvrv/
Ajax による内容変更は質問と関係ない、ということなので該当する部分をコメントアウトして、HTML と CSS を適当に書いてます。
期待通りに動いているんじゃないでしょうか。
実際にうまくいかないと悩んでいるコードと、質問に書いたコードは違っていると思いますが、
というようなあたりが、うまくいかない原因なのではないかと想像します。
No.1
49732154
ここでベストアンサー
100pt
jsFiddle で、質問にあるコードを試してみたのがこちらです。
https://jsfiddle.net/moqknvrv/
Ajax による内容変更は質問と関係ない、ということなので該当する部分をコメントアウトして、HTML と CSS を適当に書いてます。
期待通りに動いているんじゃないでしょうか。
実際にうまくいかないと悩んでいるコードと、質問に書いたコードは違っていると思いますが、
というようなあたりが、うまくいかない原因なのではないかと想像します。
LIのクラスには、デフォルト表示用にnow-tabをあらかじめ与えてありましたが、これがあると動かないようでした。
ああ、なるほど。
click のイベントハンドラを定義しているのは li.hide-tab だけだから、最初に now-tab のタブをクリックしても反応がないと。
click のイベントハンドラは now-tab でも動くので、こんな風にしてみても。
10
10
$('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');
...
終了後にありがとうございます。
最初に付してないと動かないというところが、内部動作的に理解できていませんが、今回の質問でひとつの知識となりました。
自己解決というか、以下の内容で納得することにしました。
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にポイントを差し上げて終了したいと思います。
1
1
1
ああ、なるほど。
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終了後にありがとうございます。
2015/05/29 17:36:45最初に付してないと動かないというところが、内部動作的に理解できていませんが、今回の質問でひとつの知識となりました。