我使用的网站允许其用户使用管理面板,我们可以在加载DOM后将HTML / CSS / Javascript / Jquery添加到网站。由于我是用户,因此无法更改从服务器加载的内容。它们提供了一些可以放入内容的选项卡,我遇到的问题是所有内容都加载了DOM,因为我有大量的内容,这使得网站加载速度有点慢。
我想要清空/分离/删除除第一个标签之外的所有标签内容,即#tab0和#tabcontent0,然后当我点击其他标签时,重新插入内容。
这是现有的HTML和他们加载的脚本。我可以通过更改重新加载脚本,或使用javascript或jquery对其进行更改。
function show_tab (tab_id) {
var done = false;
var counter = 0;
while (! done) {
var this_tab_content = document.getElementById("tabcontent" + counter);
var this_tab = document.getElementById("tab" + counter);
if (! this_tab_content) {
done = true;
} else {
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
} else {
this_tab_content.style.display = 'none';
this_tab.className = "";
}
}
counter++;
}
location.hash = tab_id;
}
<div id="homepagetabsdiv">
<ul id="homepagetabs">
<li class="currenttab" id="tab0" onclick="javascript:show_tab('0');">Main</li>
<li class="" id="tab1" onclick="javascript:show_tab('1');">TAB 1</li>
<li class="" id="tab2" onclick="javascript:show_tab('2');">TAB 2</li>
<li class="" id="tab3" onclick="javascript:show_tab('3');">TAB 3</li>
<li class="" id="tab4" onclick="javascript:show_tab('4');">TAB 4</li>
</ul>
</div>
<div id="tabcontent0" class="homepagetabcontent"></div>
<div id="tabcontent1" class="homepagetabcontent"></div>
<div id="tabcontent2" class="homepagetabcontent"></div>
<div id="tabcontent3" class="homepagetabcontent"></div>
<div id="tabcontent4" class="homepagetabcontent"></div>
答案 0 :(得分:2)
一种选择是将每个标签的内容存储在单独的文件中(例如tabs/tab1.html
,tabs/tab2.html
等)。当用户单击选项卡时,您调用loadTab
函数将该选项卡附加到正文(或者您需要将其附加到的任何位置)。
// call this from show_tab
function loadTab(tabId){
if(!$(tabId).get(0)){
var tabNumber = tabId.replace("#tabcontent", "")
jQuery.ajax({
url: './tabs/tab' + tabNumber + ".html", // Change path depending on file location
dataType: 'html'
})
.done(function(html) {
jQuery('body').append(html);
});
}
}
答案 1 :(得分:2)
正如您所描述的那样,我不确定您是否有权添加额外的* .html文件。如果可以的话,我建议(我在上面的问题上发表评论)将标签内容分成不同的html页面并用ajax加载它们。
如果你不能添加你自己的html文件,你只能加载display:none;
中的所有内容并添加一些ajax loader gif,直到所有内容都被加载并在加载完成后隐藏它。
回到我的第一个建议(假设您有权添加文件):
首先,您可以更改您的html,以便有一个中央共享位置来显示内容:
<div id="homepagetabsdiv">
<ul id="homepagetabs">
<li class="currenttab" id="tab0" onclick="javascript:show_tab('0');">Main</li>
<li class="" id="tab1" onclick="javascript:show_tab('1');">TAB 1</li>
<li class="" id="tab2" onclick="javascript:show_tab('2');">TAB 2</li>
<li class="" id="tab3" onclick="javascript:show_tab('3');">TAB 3</li>
<li class="" id="tab4" onclick="javascript:show_tab('4');">TAB 4</li>
</ul>
</div>
<div id="content" class="homepagetabcontent"></div>
然后,每次点击都会加载并使用新内容更改此中心位置:
function show_tab (tab_id) {
$.get("content" + tab_id + ".html", function (data) {
$("#content").empty().html(data);
});
}
您应添加的新文件将是:
content1.html:
<p>Content 1 example</p>
content2.html:
<p>Content 2 example</p>
依旧......
希望它有所帮助,祝你好运!
答案 2 :(得分:2)
您可以删除内容但保留引用,然后重新附加。该示例删除所有内容,重新附加内容0,然后在4s附加内容1。
我在手机上写了这个,所以我不能在这里编码格式:(所以jsbin: