Ich habe eine Registerkarte Webseite mit einem Schalter mit jQuery gemacht. Der Tab-Schalter funktioniert gut, aber jetzt, was ich erreichen möchte ist, div Inhalt dynamisch mit AJAX nur zu laden, wenn der Benutzer auf einen Tab zum ersten Mal klickt. Ich habe jedoch eine Flagge als Attribut auf Tab-Inhalt div, so etwas wie data-loaded="0", so dass, wenn ein Benutzer ein zweites Mal auf der gleichen Registerkarte klickt, die Daten nicht ein zweites Mal geladen werden. Aber was ist der beste Weg, die Daten dynamisch in das div zu laden? Ich möchte es allgemein machen, damit sich die JS (jQuery) -Funktion zum Laden von Daten für jede Registerkarte ändern kann.Laden div Inhalt auf einer Registerkarte
Below ich den Code-Schnipsel gesetzt haben
Wenn jemand will, mit ihm spielen i in jsfiddle geladen haben: 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>Vielen Dank im Voraus
Sie getan haben eine ziemlich gute Arbeit so weit. Und jetzt, um Daten dynamisch in die Div zu laden, haben Sie ein paar Optionen. Sie können Ajax verwenden und Daten laden, wie Sie sagten, oder Sie deklarieren eine globale boolesche Variable und initialisieren sie auf FALSE. Wenn Daten zum ersten Mal geladen werden, legen Sie sie auf True fest. Sie könnten dann diese Boolesche Flagge in Ihrem AJAX verwenden. Wenn das Flag falsch ist, dann wird AJAX ausgelöst, sonst passiert nichts ... – Poiz