的Html變化DIV內容

我有一個鬥爭。這些問題不是其中的一個，而更像是如何做得更好。的Html變化DIV內容

而且我想對資產淨值的

我的問題是點擊什麼是「正確」或正確的方法做，而不在代碼弄得一團糟的時候休息裝入內容。

如何到目前爲止

<li><a class="navelement" data-url="resources/web/loadit.html" href="#">navbar A</a></li>

完成它，使用jQuery的

$(document).ready(function(){ 
$('.navelement').click(function(e){ 
    e.preventDefault; 
    $('#content').load($(this).data('url')); 
}); 
$('.navelement:eq(0)').click();

}）;

我喜歡這種方法，但我需要執行AJAX REST調用每個更改導航欄的時間。

第二條本辦法我能想到是隱藏/ css中div的表演。任何提示將被appreaciated。

來源

2017-06-04 Mattias Kamiński

如果你想「裝載的東西」到DIV，那麼內容必須是「裝」（使用AJAX）。如果你只是想改變內容，但已經有了它，你可以使用'$（'＃content'）.load（new_html_content）'。或者，如您所說，將所有內容加載但用CSS隱藏，並根據需要顯示/隱藏。 – Whothehellisthat

我建議給你的是，首先加載所有的HTML導航到內容中並隱藏它們（添加類），同時爲foreach生成的div設置一個自定義類（例如我添加了nav元素的索引）你會阻止多個Ajax加載（只有一次）。

然後，點擊每個NAV後只顯示它的內容由例如指的生成的類（NAV1，NAV2，導航3）

請找到婁一個工作片斷

$(function() { 
 
    $(".navelement").each(function(index, elm) { 
 
    if ($(elm).data("url")) { 
 
     var navElment = $("<div class='navdiv nav" + index + " hidden'>").load($(elm).data("url")); 
 

 

 

 
     $("#content").append(navElment); 
 

 
     $(elm).on("click", function() { 
 
     $(".navdiv").addClass("hidden"); 
 
     $(".navdiv.nav" + index).removeClass("hidden"); 
 
     }) 
 
    } 
 

 

 
    }) 
 

 

 

 

 
})

.hidden { 
 
    display: none; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
    padding:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a class="navelement" data-url="https://httpbin.org/get?text=navAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" href="#">navbar A</a></li> 
 
    <li><a class="navelement" data-url="https://httpbin.org/get?text=navBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB" href="#">navbar B</a></li> 
 
    <li><a class="navelement" data-url="https://httpbin.org/get?text=navCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC" href="#">navbar C</a></li> 
 
</ul> 
 
<div id="content"> 
 

 
</div>

來源

2017-06-04 10:45:05

謝謝，這就是我現在試圖做的:) –

你的兩種方法都是正確的，但決策點會改變div中數據的頻率以及保留所有div加載數據所花費的帶寬。

如果DIV數據被頻繁地改變，那麼我會建議使用方法2，即加載所有div一次，隱藏和顯示所需要的一個。這將提高性能，因爲通過網絡的Ajax調用具有時間延遲。在這種情況下使用方法2可以改善UI體驗。這也被稱爲急切加載。

但是，如果你有大量的數據和用戶不必要求所有已加載然後將數據情況下，將導致這可能消耗大量的帶寬，也導致頁面的長初始加載所有div的不必要的負荷。在這種情況下，建議使用方法1。這稱爲延遲加載。

來源

2017-06-04 10:23:12

謝謝，你幾乎回答了我所要求的 –

的Html變化DIV內容

回答

相關問題