不确定技术术语 - HTML/CSS/Javascript 表格问题

Question

我有一个与 HTML/CSS/Javascript 相关的问题，但我不确定如何提问，因为我早就忘记了所有的技术术语。

我的最终目标是构建（编码）一个执行以下操作的网页元素：

- 有许多可点击的元素（图形按钮，而不是 HTML“按钮”），当点击这些元素时，会显示可变数量的文本，提供有关某些事物的有趣细节。如果可能的话，需要某种方式让这些按钮“突出显示”（我知道如何使用 CSS 技巧，在单击时通过坐标向上/向下或向左/向右交换图像，但我不确定如何让它符合我的意图）。

-允许我在每个按钮前贴上某种标签。 （我最初的计划是将所有内容都放入一个 HTML 表格中，这样我就可以在按钮的一侧有一列，我可以在其中输入标签）。

-允许我在弹出详细信息框时显示图像背景。

- 按钮及其标题牌位于细节框的一侧，而细节框本身位于另一侧。

例子：

我在最左边有一列包含水果名称（苹果、橙子、香蕉、梨）。在紧挨着这些名称的列中是一系列与每个水果名称对齐的按钮（每个水果名称一个按钮，因此“Apple”然后 {button} 在一行上，然后是“Orange” 然后 {button} 在下一行， ETC。）。单击该按钮将在最右侧显示每个水果的详细描述，并在该详细文本后面显示背景图像（所有这些详细信息框的图像相同）。在单击按钮之前，此背景图像和任何文本都将被隐藏。我希望如果单击两次相同的按钮，文本会再次隐藏。

为所有这些构建图像我没有问题，但我迷失了代码。是否可以将所有这些编码为某种 HTML 表格，以便我可以保持其井井有条？是否可以让最左边的列（示例）有一个背景图像，然后在其顶部放置可替换的文本（从而减少图形的数量）？

如果我的问题和措辞在技术上不是描述性的，我深表歉意。我早就习惯了简单的 HTML 页面，从未真正学习过 CSS/Javascript。如果我的问题没有意义，我会非常乐意绘制图像以更好地解释我的目标。

提前感谢您的任何回复。

Answer 1

嗯，没有单一的“正确”方法可以满足您的要求。有很多方法可以解决这个问题。归结为：1) 您希望花费多少时间来构建解决方案，以及 2) 如果您在项目中添加不同的技术（例如 Bootstrap 或 jQuery）会不会有问题？

从一般的角度来看：

我在某处听说过一条经验法则，我认为在这种情况下会有所帮助。页面上的每一件事都是一个矩形。一切。您真正要做的就是命名、设置样式和操作这些矩形。

您在 html 页面上创建的任何元素、id 或类都可以由您的 css 或 javascript 操作。如果它在您的 html 页面上不存在，那么您可以使用 css 或 javascript 创建它并然后对其进行操作。

任何东西都可以做成“按钮”，而不仅仅是专门称为按钮的项目。你可以选择任何你想成为“按钮”的矩形；你只需要这样定位和设置它们的样式。

（不过，作为一条建议，我建议坚持使用 html 的 <button> 功能。标准化语义对所有人都有好处，您可以使用 css 随意更改这些按钮的外观和感觉） .

更具体一点：

处理页面上信息隐藏或显示的传统方法是使用 javascript 和/或 jQuery。

为所有要操作的常见 html 元素指定类名 class="example-class"，并为要操作的任何唯一元素指定 id 名称 id="example-id"。

Here's the jQuery page regarding .hide() and .show()。 （如果您对这些方法有任何具体问题，Stack Overflow 可以提供帮助）。您将定位到您在 html 中命名的类或 ID。

至于组织你的页面，使用和嵌套<div>标签通常是要走的路。 Bootstrap 带有特殊的类，可以帮助完成必要的角色：class="row" 帮助处理水平，class="col-SIZE-NUM" 帮助处理垂直，class="well" 帮助组织部分。

Bootstrap 的主页很好地概述了您的选项：Here。

以上所有内容都可以使用 vanilla css 和 vanilla javascript 完成。由您决定是否要（或什至能够）在这里让事情变得更轻松。

希望这会有所帮助！