javascript - 使用 jQuery 的单页网站 - JS 或 HTML 中的内容

Question

我刚刚开始学习 JS 和 jQuery，并认为自己在 HTML/CSS 方面相当有能力。我正在构建一个单页前端网站。我已经用 Bootstrap 确定了布局，现在我只是想弄清楚一些功能。我的场景如下:

有 4 个 <div> s 在每个 4 <div> 中带有文本和图像;还有一个<div>与类 #content在它下面。有一个 .on('click')每个 #c1-4 的监听器div，当用户点击特定的 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 <div>被选中。进入#content的内容主要是文本，但也有一些图标和图像，具有适当的样式。

问题:将内容存储和加载到 #content 中的最佳方式是什么？分区？根据我目前的知识，我认为选项是:

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

2. 硬编码 4 个不同的 div，分别与 4 个 #c 相关ID 和使用 .show()和 .hide()相应地。

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

我还想知道上述每种方法的优缺点，以及哪种方法更适合 future 的维护(例如添加第五个、第六个 #c 编号的 div 来选择和加载内容)。

Answer 1

在现实世界中，开发人员认为后端数据会根据用户的点击来替换/附加内容，而将内容附加/前置/html 或将内容加载到 div 元素只是第二件事。不确定您将如何根据单击的按钮对不同的内容进行硬编码，我认为在您的情况下 #2 和 #3 应该可以解决问题。您可以使用追加/前置操作(我想它们是不言自明的，但在某些情况下可能很有用)。正如我最初在 ideal work 中提到的，您将对后端端点(数据库、API 等)进行查询并从那里获取内容。完成后，您只需使用那些 div 和 css(内联或 CSS 表格)东西对其进行相应的样式设置。注重整体 build !