我刚刚开始学习 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
中的最佳方式是什么?分区?根据我目前的知识,我认为选项是:
将其硬编码到 JS 中并使用
.html()
设置内容;尽管这会向 JS 添加相当多的 HTML。硬编码 4 个不同的 div,分别与 4 个
#c
相关ID 和使用.show()
和.hide()
相应地。使用
.load()
从另一个 HTML 文档加载内容。但是,我不确定如何处理样式以及这将如何影响#content
的显示。分区
我还想知道上述每种方法的优缺点,以及哪种方法更适合 future 的维护(例如添加第五个、第六个 #c
编号的 div 来选择和加载内容)。
最佳答案
在现实世界中,开发人员认为后端数据会根据用户的点击来替换/附加内容,而将内容附加/前置/html 或将内容加载到 div 元素只是第二件事。不确定您将如何根据单击的按钮对不同的内容进行硬编码,我认为在您的情况下 #2 和 #3 应该可以解决问题。 您可以使用追加/前置操作(我想它们是不言自明的,但在某些情况下可能很有用)。 正如我最初在 ideal work 中提到的,您将对后端端点(数据库、API 等)进行查询并从那里获取内容。完成后,您只需使用那些 div 和 css(内联或 CSS 表格)东西对其进行相应的样式设置。注重整体 build !
关于javascript - 使用 jQuery 的单页网站 - JS 或 HTML 中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39107099/