Javascript 带有jQuery的单页网站-内容为JS或HTML 我刚刚拿起JS& jQuery，认为自己很有能力使用HTML/CSS。我正在建设一个只有一页的前端网站。我已经用Bootstrap确定了布局，现在我只是想弄清楚其中的一些功能。我的设想如下：

有4个s，每个s中有文本和图像；下面有一个课程内容。每个c1-4 div都有一个.on'click'侦听器，当用户单击特定div时，content div将相应地改变

<div id="#c1" class="active-div">
    <p>Text Here</p>
    <img src="image.jpg">
</div>

<div id="#c2">
    <p>Text 2 Here</p>
    <img src="image2.jpg">
</div>

<div id="#c3">
    <p>Text 3 Here</p>
    <img src="image3.jpg">
</div>

<div id="#c4">
    <p>Text 4 Here</p>
    <img src="image4.jpg">
</div>

<div id="#content">
    <!-- Content of the selected div goes here -->
</div>

默认情况下，选择c1。进入内容的内容主要是文本，但也有一些图标和图像，具有适当的样式

问题：将内容存储并加载到contentdiv的最佳方式是什么？根据我目前所知，我认为有以下几种选择：

将其硬编码到JS中，并使用.html设置内容；尽管这会给JS添加相当多的HTML

硬编码与4个c ID中的每一个相关的4个不同div，并相应地使用.show和.hide

<div id="#c1" class="active-div">
    <p>Text Here</p>
    <img src="image.jpg">
</div>

<div id="#c2">
    <p>Text 2 Here</p>
    <img src="image2.jpg">
</div>

<div id="#c3">
    <p>Text 3 Here</p>
    <img src="image3.jpg">
</div>

<div id="#c4">
    <p>Text 4 Here</p>
    <img src="image4.jpg">
</div>

<div id="#content">
    <!-- Content of the selected div goes here -->
</div>

使用.load从另一个HTML文档加载内容。但是，我不确定样式将如何处理，以及这将如何影响contentdiv的显示

---

我还想知道上述每种方法的优缺点，以及哪种方法更适合未来的维护，例如添加第五种，第六C编号DIV来选择和加载内容。

< P>在真实世界开发者中考虑后端数据来替换/追加基于用户点击的内容，而第二件事就是如何精确地添加/准备/HTML或将内容加载到div元素中。不确定如何根据单击的按钮硬编码不同的内容，我认为在您的情况下，2和3应该做到这一点。 您可以使用append/prepend操作，我想它们是不言自明的，但在某些情况下可能有用。

---

正如我最初在《理想工作》中提到的，您将对后端端点数据库、API等进行查询。。并从那里获取内容。完成后，您只需使用这些div和css（内联或css表内容）对其进行相应的样式设置。注重整体建设

有很多方法可以做到这一点，还有很多JS框架都有不同的做法，但我认为您所有的选择都是合适的，尤其是在使用jQuery的情况下。我只想谈谈你的三个选择：

您可以将其硬编码到JS中，但也可以将HTML中的内容放在标记中，并将其作为JavaScript字符串加载到jQuery中，就像下划线模板一样

<script type="text/template" id="div-1">
    <span>Hey, this is some content</span>
</script>

然后在以后的JavaScript中，只需执行$'div-1'.html即可获得它的内容，您可以将其粘贴到内容div中

这一选择也是完全可以接受的。 只要已经将所有css应用于文档，动态更改DOM不会影响其应用样式的能力。只需确保已加载样式表中的所有规则。

---

扩展我的评论，下面是如何使用隐藏内容div和使用

$function{ var content=$'.active div.content'.html； $'content'.htmlcontent； $'.item'。单击函数{ $'.item'.removeClass'active-div'； $this.addClass'active-div'； content=$'.activediv.content'.html； $'content'.htmlcontent； }; }; .项目{ 光标：指针； 显示：内联块； 右边填充：10px； } .内容{ 显示：无； } 内容{ 背景：2000人； 颜色：fff； } 此处文本

样本内容1 这里是文本2

样本内容2 这里是文本3

样本内容3 这里是文本4

样本内容4

---

我会在每个c1-4 div中添加一个div，隐藏这些div，然后当你点击其中一个div时，内容的html被替换为与点击元素关联的隐藏内容div的html。是的，我知道后端交互，因为我刚刚开始使用Node.js和MongoDB。然而，这个特定的项目不需要动态更改数据，甚至不需要构建后端，因为内容在相当长的一段时间内不会更改；这也是为什么我决定让它成为一个纯粹的前端产品！所以，这2&3和可能是我的50美分应该是正确的答案-