改变“内在内容”的最佳方式

Question

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

在我选择如何做之前，我想了解一下最佳做法是什么。我是新手，使用javascript更改html内容。特别是如果你想以最节省资源的方式考虑它。

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

我应该使用哪些jQuery函数？

Answer 1

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

点击此处阅读有关jQuery UI标签的更多信息：http://jqueryui.com/demos/tabs/

Answer 2

jsBin demo

将所有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!
   });


});

Answer 3

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

Answer 4

Bootstrap本身有tabs support，你只需要为这样的组件克服包含的CSS样式，以保护你的。