0
jQueryを使用してスイッチでタブ付きのWebページを作成しました。タブスイッチはうまくいきますが、今私が達成したいのは、ユーザが最初にタブをクリックしたときだけAJAXでdivコンテンツをdinamicallyロードすることです。私は、ユーザーが同じタブで2回目のクリックをしたときに、データが2度目に読み込まれないように、タブコンテンツdivに属性としてフラグを設定しましたが、data-loaded="0"のようなものです。しかし、ディメンションでデータをdinamicallyロードする最良の方法は何ですか？ JS（jQuery）関数が各タブでデータをロードできるように一般的にしたいと思います。事前タブ付きのページでdivコンテンツを表示する
jQuery(document).ready(function() {
\t $('ul.tabs li').click(function(){
\t \t var tab_id = $(this).attr('data-tab');
\t \t $('ul.tabs li').removeClass('current');
\t \t $('.tab-content').removeClass('current');
\t \t $(this).addClass('current');
\t \t $("#"+tab_id).addClass('current');
\t \t
\t \t $('ul.tabs li').each(function() {
\t \t \t var nimg = $(this).find('img').attr('src');
\t \t \t $(this).find('img').attr('src', nimg.replace('_r', '_g'));
\t \t });
\t \t
\t \t var img = $(this).find('img').attr('src');
\t \t $(this).find('img').attr('src', img.replace('_g', '_r'));
\t });
});ul.tabs{
\t margin: 0px;
\t padding: 0px;
\t list-style: none;
}
ul.tabs li{
\t line-height: 24px;
\t background: #ededed;
\t color: #777;
\t display: inline-block;
\t padding: 10px 40px;
\t cursor: pointer;
\t font: 16pt arial,verdana !important;
\t border: 1px solid rgb(164, 162, 162);
\t border-right: medium none;
\t margin-right: -5px;
}
ul.tabs li.current{
\t background: none;
\t color: rgb(227,32,46);
\t border-bottom: 0;
\t border-top: 3px solid rgb(227,32,46);
\t padding-top: 8px;
}
.tab-content{
\t display: none;
\t padding-top: 15px;
}
.tab-content.current{
\t display: inherit;
}
ul.tabs > li > img {
\t margin-right: 5px;
\t width: 24px;
\t height: 24px;
}
.tabLast {
\t border-right: 1px solid rgb(164, 162, 162) !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tabs">
\t \t <li data-tab="tab-1" class="tab-link"><img style="float:left;" src="http://fantamondi.it/silcam/images/pencil_g.png"> Amministratore</li>
\t \t <li data-tab="tab-2" class="tab-link current"><img style="float:left;" src="http://fantamondi.it/silcam/images/pencil_r.png"> Letture</li>
\t \t <li data-tab="tab-3" class="tab-link"><img style="float:left;" src="http://fantamondi.it/silcam/images/pencil_g.png"> Unità immobiliari</li>
\t \t <li data-tab="tab-5" class="tab-link tabLast"><img style="float:left;" src="http://fantamondi.it/silcam/images/pencil_g.png"> Riparti</li>
\t </ul>
\t <div id="tab-1" class="tab-content">TAB 1</div>
\t <div id="tab-2" class="tab-content current">TAB 2</div>
\t <div id="tab-3" class="tab-content">TAB 3</div>
\t <div id="tab-5" class="tab-content">TAB 4</div>ありがとう：私は、コードスニペット
誰かが私はjsfiddleにロードされてきたことでプレイしたい場合
を入れている下
。そして、Divに動的にデータをロードするには、いくつかのオプションがあります。あなたは言ったようにAjaxとデータロードを使うことができます。あるいは、グローバルブール変数を宣言し、それをFALSEに初期化することができます。そして、最初にデータが読み込まれると、Trueに設定されます。このブール旗をあなたのAJAXで使うことができます。 FlagがFalseの場合、AJAXが起動します。それ以外の場合は何も起こりません。 – Poiz