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

【问题标题】：Best way to change "inner content"改变“内在内容”的最佳方式
【发布时间】：2012-10-01 01:04:05
【问题描述】：

所以我有这个布局，我计划使用javascript/jquery根据上部活动的链接来更改下部框中的内容。

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

下方框中的布局会有所不同。那么每个lowerbox布局必须从一开始就存在于html中？并且每个布局都应该包含在一个 div 元素中，以便以最简单的方式更改整个块。我在这里想对了吗？

我应该使用哪些 jQuery 函数？

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

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


});

【讨论】：

谢谢。有效。但我注意到的一件事是 e.stopPropagation() 函数并没有阻止浏览器在单击后几分钟后更改站点。我刚刚删除了 href 中的 url，现在它的变化很好。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

Bootstrap 本身有 tabs support，您只需要克服此类组件包含的 CSS 样式即可保留您的样式。

【讨论】：

是的，我注意到了。但是想尽量少用建好的js。主要使用 CSS 的引导程序。不过谢谢！