我有一个与HTML / CSS / Javascript相关的问题，但我不确定如何提问，因为我早就忘记了所有内容的技术术语。
我的最终目标是构建（编码）执行以下操作的网页元素：
- 有许多可点击的元素（图形按钮，而不是HTML＆＃34;按钮＆＃34;），当点击时，会显示可变数量的文本，提供有关某些事物的有趣细节。如果可能的话，有一些方法可以使用这些按钮＆＃34;突出显示＆＃34;我希望（我知道如何在点击时按照坐标向上/向下或左/右交换图像的CSS技巧）但我不确定如何使其与我想要的一起工作。
- 允许我在每个按钮前贴上某种标签。 （我最初的计划是将所有内容都放入HTML表格中，因此我可以在按钮的一侧创建一个列，我可以在其中键入标签）。
- 当弹出详细信息框时，允许我显示图像背景。
- 组织使得按钮及其标题牌位于细节框的一侧，细节框本身位于另一侧。
示例：
我在最左边有一个列有水果名称（Apple，Orange，Banana，Pear）。在这些名称旁边的一列中是一系列与每个水果名称对齐的按钮（每个水果名称一个按钮，所以＆＃34; Apple＆＃34;然后{row}在一行上，然后＆＃34; Orange＆＃34 ;然后在下一行{按钮}，等等。单击该按钮将在最右侧显示每个水果的详细描述，并在此详细设计文本后面显示背景图像（所有这些细节框的相同图像）。在单击按钮之前，将隐藏此背景图像和任何文本。我希望如果单击两次相同的按钮，则再次隐藏文本。
我为所有这些构建图像没有问题，但我在代码上丢失了。是否可以将所有这些代码编写为某种HTML表格，以便我可以保持组织有序？是否有可能让最左边的列（示例）有一个背景图像，然后在它上面放置可替换文本（从而减少图形数量）？
如果我的问题和措辞在技术上没有描述性，我道歉。我已经习惯了简单的HTML页面而且从未真正学过CSS / Javascript。如果我的问题没有意义，我会非常乐意画出一张图片来更好地解释我的目标。
提前感谢您的回复。
答案 0 :(得分：1)
嗯，没有单身＆＃34;对＆＃34;做你要问的方法。有几十种方法可以解决这个问题。它归结为：1）您希望花费多少时间来构建解决方案; 2）如果您为项目添加了不同的技术（例如Bootstrap或jQuery），这会成为一个问题吗？
从一般观点来看：
根据我的经验，我认为在某些地方，我认为在这种情况下有所帮助。页面上的每一件东西都是一个矩形。一切。你所做的只是命名，造型和操纵这些矩形。
您在html页面上创建的任何元素，ID或类都可以通过css或javascript进行操作。如果它不存在于您的html页面上，那么您可以使用css或javascript创建它，然后然后操纵它。
任何东西都可以制成一个＆＃34;按钮＆＃34;，而不仅仅是专门用作按钮的项目。你可以选择你想成为你的＆＃34;按钮＆＃34 ;;你只需要对它们进行定位和设计。
（作为一条建议，我建议坚持使用html＆＃39; <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完成。由你来决定你是否愿意（或者甚至能够）让自己在这里变得更容易。
希望这有帮助！