質問: ### 前提・実現したいこと jQueryで実装したタブメニューの中に、AjaxによってHTMLを表示させたいと考えています。 具体的には、 ``` 分類1 分類2 分類3 ここに分類2が入る ここに分類2が入る ここに分類3が入る ``` ``` $("#tabMenu li a").on("click", function(){ $("#tabBoxes div").hide(); $($(this).attr("href")).fadeToggle(); }); ``` のようにして作ったタブメニューの中に、 ``` $.ajax({ url: "xml/parts_data.xml", type: "GET", dataType: "xml", timeout: 1000, error: function(){ alert("ロード失敗"); }, success: function(xml){ $(xml).find("item").each(function(){ $("#tabBox1 ul").append(''); }); } }); ``` のようにしてHTML(imgタグなので画像)を表示させます。 しかし、一番最初の表示だけはうまくいくのですが、タブを切り替えた際に、それまで表示されていたimgタグが消えてしまいます。 Ajaxで整形し出力したHTMLが消えないようにタブを切り替えるにはどのようにすればよいのでしょうか? わかりにくい質問かとは思いますがご回答を頂けると助かります_(._.)_ ### 試したこと タブ切り替えのクリックの度に上記のコードを実行し、HTMLをAjaxで整形し出力すれば実現はできますが、それは効率が悪い気がして... また、タブメニューに関しては下記サイトを参考にしています。 http://liginc.co.jp/web/js/jquery/34048
回答: ``` $(xml).find("item").each(function(){ $("#tabBox1 ul").append(''); }); ``` 上記部分の、`$("#tabBox1 ul")` のセレクタが、`#tabBox1` 固定になっていますが、 おかしくないですか? クリックされた tabBox にメニューを append する必要がありますよね? 以下のようなイメージではないですか? 取得済みなら、通信にいかずに fadeToggle のみ行う、などの制御は省いています。 ``` $("#tabMenu li a").on("click", function(){ var selectedMenu = $(this); $.ajax({ // 色々略 success: function(xml){ $(xml).find("item").each(function(){ selectedMenu.children("ul").append(''); }); } }); }); ```