1

所以我有这这个布局，我计划使用 javascript/jquery 来更改下框中的内容，具体取决于上方的活动链接。

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

下部框中的布局将彼此不同。那么每个lowerbox布局必须从一开始就存在于html中？并且每个布局都应该包含在一个 div 元素中，以便以最简单的方式更改整个块。我在这里思考正确吗？

我应该使用哪些 jQuery 函数？

4

4 回答 4

2

我最近一直在做类似的事情。我的建议是使用 jQuery UI 的标签功能。页面上的每个部分都是一个单独的 DIV 标记，您可以根据需要隐藏和显示。这将导致整个页面在您按下按钮后立即加载并可用。

转到此处阅读有关 jQuery UI 选项卡的更多信息：http: //jqueryui.com/demos/tabs/

于 2012-10-01T01:11:45.363 回答
2

jsBin 演示

将所有 DIV .page包装在一个公共容器中#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!
   });


});
于 2012-10-01T01:18:33.077 回答
1

如果它们必须都在原始 HMTL 页面中，那么只需将每个内容块放在它自己的 div 中，每个内容块都有自己的 id 值，每个都有一个共同的类名，默认情况下通过 CSS 将它们全部隐藏display: none，然后使用 javascript根据点击显示所需的内容集。每次单击时，您都可以隐藏所有这些并显示您要显示的那个。

于 2012-10-01T01:10:44.170 回答
1

Bootstrap 本身具有标签支持，您只需要克服此类组件的包含 CSS 样式即可保留您的样式。

于 2012-10-01T01:31:49.910 回答