Question

我正在挣扎。这些问题不是其中之一，但更像是如何做得更好。

此外，我想在点击导航

时将休息加载到内容中

我的问题是什么是“正确”或正确的做法，而不会在代码中弄乱。

到目前为止我是如何做到的

<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中。任何提示都会被贬低。

Answer 1

您的两种方法都是正确的，但决策点是div中数据的更改频率以及保持所有div加载数据所需的带宽。

如果div中的数据经常更改，那么我建议使用方法2，即加载所有div一次并隐藏并显示所需的div。这将改善性能，因为网络上的ajax调用具有时间延迟。在这种情况下使用方法2将改善UI体验。这也称为急切加载。

但是如果你有大量数据并且用户不需要你已经加载的所有数据，那么它将导致所有div的不必要的加载，这可能消耗相当大的带宽并且还导致页面的长初始加载。在这种情况下，建议采用方法1。这称为延迟加载。

Answer 2

我建议你，首先在内容中加载你的所有html导航并隐藏它们（添加类），同时将foreach生成的div设置为自定义类（例如我添加了nav元素的索引），这个你＆＃39; ll防止多次ajax加载（仅一次）。

然后，点击每个导航后只需通过示例（nav1，nav2，nav 3）引用生成的类来显示它的内容

请在下面找到一个工作片段

＆＃13;

$(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");
      })
    }


  })




})

＆＃13;

.hidden {
  display: none;
}

ul li {
  display: inline;
  padding:5px;
}

＆＃13;

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

＆＃13;

Html更改div内容

2 个答案: