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

Question

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

我的最终目标是构建(编码)一个执行以下操作的网页元素:

- 有许多可点击的元素(图形按钮，而不是 HTML“按钮”)，当点击这些元素时，会显示可变数量的文本，提供有关某些事物的有趣细节。如果可能的话，需要一些让这些按钮“突出显示”的方法(我知道如何实现一个 CSS 技巧，点击时图像按坐标上下或左右交换，但我不确定如何让它按照我的意图工作)。

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

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

- 按钮及其标题板位于详细信息框的一侧，而详细信息框本身位于另一侧。

示例:

我在最左边有一列，上面有水果的名称(Apple、Orange、Banana、Pear)。在这些名称旁边的一列中，是一系列与每个水果名称对齐的按钮(每个水果名称一个按钮，所以“Apple”然后是一行的{button}，然后是“Orange”然后是下一行的{button}， ETC。)。单击该按钮将在最右侧显示每种水果的详细描述，并在该详细说明文本后面显示背景图像(所有这些详细信息框都使用相同的图像)。在单击按钮之前，此背景图像和任何文本都将被隐藏。我希望如果同一个按钮被点击两次，文本会再次被隐藏。

我可以为所有这些构造图像，但我迷失了代码。是否可以将所有这些编码为某种 HTML 表格，以便我可以将其组织起来？是否可以让最左边的列(示例)具有背景图像，然后在其顶部放置可替换文本(从而减少图形数量)？

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

提前感谢您的任何回复。

Answer 1

好吧，没有单一的“正确”方法来完成您的要求。有许多方法可以解决这个问题。归结为:1) 您想花多少时间构建解决方案，以及 2) 如果您向元素添加不同的技术(例如 Bootstrap 或 jQuery)，这会不会成为问题？

从一般的 Angular 来看:

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

您在 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 带有特殊的类，可以帮助完成必要的 Angular 色:class="row"帮助水平，class="col-SIZE-NUM"帮助垂直领域，以及class="well"帮助组织部分。

Bootstrap 的主页对您的选项有一个很好的概述:Here .

以上所有内容也可以使用 vanilla css 和 vanilla javascript 来完成。您可以自行决定是否要(或什至能够)让事情变得更轻松一些。

希望这对您有所帮助!