javascript - 更改 "inner content"的最佳方法

Question

所以我有 这种布局，我计划使用 javascript/jquery 来根据上层事件链接更改下层框中的内容。

在我选择如何执行此操作之前，我想了解一些有关最佳实践的信息。在使用 javascript 更改 html 内容时，我是新手。特别是如果您想以最节省资源的方式进行考虑。

下方框中的布局会有所不同。所以每个 lowerbox 布局必须从一开始就出现在 html 中？每个布局都应包含在一个 div 元素中，以便最简单地更改整个 block 。我在这里的想法是否正确？

我应该使用哪些 jQuery 函数？

Answer 1

jsBin demo

将所有 DIV .page 包装在一个公共(public)容器 #pages 中:

<ul id="navigation">
   <li>Link 1</li>
   <li>Link 2</li>
   <li>Link 3</li>
   <li>Link 4</li>
   <li>Link 5</li>
</ul>
<div id="pages">
   <div class="page">Page 1</div>
   <div class="page">Page 2</div>
   <div class="page">Page 3</div>
   <div class="page">Page 4</div>
   <div class="page">Page 5</div>
</div>

不仅仅是检索点击导航的索引并使具有相同索引的 .page 可见:

jQuery(function($){
    
   $('.page:gt(0)').hide(); // hide all pages but first

   $('ul#navigation li').click(function(){
      var liIndex = $(this).index();
      $('.page').hide().eq(liIndex).show(); // hide all and show matching page!
   });


});