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

一种选择是将每个标签的内容存储在单独的文件中（例如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);
      });
  }
}

Answer 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>

依旧......

希望它有所帮助，祝你好运！

Answer 3

您可以删除内容但保留引用，然后重新附加。该示例删除所有内容，重新附加内容0，然后在4s附加内容1。

我在手机上写了这个，所以我不能在这里编码格式:(所以jsbin：

https://jsbin.com/nivutigena/edit?html,js,output

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

3 个答案: