我有以下要求:
一个大型数据库的前端，该数据库存储有关体育学生在学校的详细信息。例如，学生 xyz 打板球，所以数据库会为他存储板球详细信息，学生 pqr 打足球，所以数据库会为他存储足球详细信息，等等。
主屏幕分为两个部分。左侧部分是一个搜索部分，其中包含用户可以输入的多个条件。单击搜索后，结果将作为摘要发布在右侧部分。
例如如果搜索 x 结果有 5 个学生，则汇总结果将为 5 行。
现在在摘要结果上点击一个特定的学生应该会获取所有其他特定于他的详细信息，并且应该将其作为新选项卡发布在同一部分中。就像一个选项卡中的职业一样，他的运动细节在另一个选项卡中。
1) 如何使用 CSS 和 Javascript 实现这一点？ 2)如何禁用其他选项卡？例如。不应为打板球的学生启用足球选项卡。
我对 CSS 和 JS 非常陌生，所以我的要求可能并不像我想象的那么复杂。但我绝对需要一个起点。
最佳答案
使用单独的 <div>每个选项卡的部分，并在每个 div 上指定一个类属性来描述它的使用方式。您可以通过修改其 style.visibility 来隐藏/显示一个 div属性(您将其设置为“隐藏”以隐藏 div，在大多数情况下，将其设置为“阻止”以显示该 div)。您可以使用 CSS 为每个 div 应用不同的样式(例如它在页面上的位置)。
就我个人而言，我会将其分为三个不同的任务。第一项任务是使用假数据将页面布局设置为看起来正确(例如，创建一个“获取”数据的函数，但实际上只是返回固定数据)。第二个任务是提供请求处理程序，它可以根据数据库中的数据返回原始的、无样式的数据(最好是 JSON 格式)。第三个也是最后一个任务是在您的用户界面中连接 JavaScript，以使用 XHR 请求向这些端点实际获取数据，并适本地传递 JSON 响应而不是传递虚假数据。
关于javascript - 使用 CSS 和 Javascript 的制表符要求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7509089/