0
我使用jQuery制作了带有开关的标签页网页。标签开关很好用，但是现在我想要实现的只是当用户第一次点击标签时，才能用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。然后你可以在你的AJAX中使用这个布尔标志。如果标志是假的，那么AJAX会触发，否则，什么都不会发生...... – Poiz