javascript - 在页面加载时删除选项卡内容，然后在单击选项卡时添加回来

Question

我正在使用一个允许其用户使用管理面板的网站，我们可以在加载他们的 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>

Answer 1

正如您对网站的描述，我不确定您是否有权添加额外的 *.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>

等等……

希望对您有所帮助，祝您好运!