Я создал веб-страницу с вкладкой с помощью jQuery. Переключатель вкладок работает хорошо, но теперь я хочу, чтобы динамически загружать div-контент с помощью AJAX только тогда, когда пользователь нажимает на вкладку в первый раз. Хотя я помещаю флаг как атрибут в div div вкладки, что-то вроде data-loaded="0", так что, когда пользователь второй раз нажимает на той же вкладке, данные не загружаются второй раз. Но каков наилучший способ динамической загрузки данных в div? Я хотел бы сделать его общим, чтобы функция JS (jQuery) для загрузки данных могла изменяться для каждой вкладки.Загрузить содержимое div в шоу на вкладке
Ниже я положил фрагмент кода
Если кто-то хочет играть с ним я уже загружен в jsfiddle: https://jsfiddle.net/ofwvr0hq/
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>Спасибо заранее
Вы сделали довольно хорошую работу до сих пор. И теперь, чтобы динамически загружать данные в Div, у вас есть пара опций. Вы можете использовать Ajax и загруженные данные, как вы сказали, или объявляете глобальную логическую переменную и инициализируете ее до FALSE. И затем, когда данные загружаются в первый раз, вы устанавливаете значение True. Затем вы можете использовать этот Boolean Flag в своем AJAX. Если флажок False, то AJAX Fires, иначе ничего не происходит ... – Poiz