在頁面加載時刪除標籤內容，然後在點擊標籤時加回

我正在使用一個網站，允許其用戶使用一個管理面板，我們可以在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>

來源

2016-01-31 MShack

因此，將css設置爲隱藏......最好在CSS中完成，而不是在JavaScript中完成，這樣您就不會有內容了。或者用我最後回答的代碼。 '$（「＃tab1」）。click（）;' – epascarello

用CSS設置顯示：無，或者可見性：隱藏，無助於加載時間問題，我想用jquery分離，清空或者刪除附加內容或者其他建議 – MShack

有沒有辦法在域中擁有普通的舊HTML文件？如果是這樣，我可以告訴你如何使用xhr在點擊或加載時將內容發送到div。 – zer00ne

正如你所描述的網站，我不知道你是否有權限添加額外的* .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>

等等...

希望它的幫助，祝你好運！

來源

2016-02-02 22:01:54 ItayB

@MShach你能給一些反饋嗎？它能解決你的問題嗎？ – ItayB

thx這將適用於我需要的東西 – MShack

@MShack你能獎給我你的賞金嗎？ :-) – ItayB

一種選擇是存儲每個單獨的文件將這些標籤（例如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); 
     }); 
    } 
}

來源

2016-02-02 21:08:26 adilapapaya

您可以刪除內容但保留參考，然後重新附加。這個例子刪除所有內容，再附加內容0，那麼4S後附加內容1.

我寫這我的電話，所以我不能代碼格式在這裏:(所以jsbin：

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

來源

2016-02-02 22:43:16

在頁面加載時刪除標籤內容，然後在點擊標籤時加回

回答

相關問題