这有点复杂。不确定是否可能。我会尽量解释，只是问问是否有一些事情看起来令人困惑。
我正在为乐队的专辑设计一个页面。mp3 将上传到 S3 存储桶，并作为模型对象保存在 RoR 数据库中。模型属性包括：标题和歌词。
我正在设计带有三个引导专栏的网站。左边的曲目包含曲目列表，当单击一首歌曲时，所有歌曲都循环并链接到jQuery mp3播放器。中间一栏是专辑的封面。对于右列，我希望能够显示最近点击的歌曲的歌词，但我对如何做到这一点感到困惑。
我尝试使用简单的jQuery脚本和css来隐藏div的显示，然后在单击时将其更改为块或内联显示。这要么显示每首歌的所有歌词，要么根本不起作用。我还考虑过使用链接锚点定位div 的想法，但我无法弄清楚如何在同一链接中与 mp3 一起实现它。我想我可以通过删除网格系统并使用浮点数等来完全重新设计布局，但如果可能的话，我宁愿避免这种情况。
谁能想到解决方案？我对这应该如何工作感到非常困惑。还是我应该完全放弃这个想法？
这是我当前的相关代码：
<div class="container-fluid">
<div class="row">
<div class="col-md-4 tracklist">
<div id="sm2-container">
<!-- SM2 flash goes here -->
</div>
<ul class="playlist">
<% @album.songs.sort { |a,b| a.track <=> b.track }.each do |s| %>
<li class="track-num">
<%= link_to(s.audio.url) do %>
<%= s.title %>
<% end %>
</li>
<% end %>
</ul>
</div>
<div class="col-md-4">
<%= image_tag(@album.image.url, :class => 'album-cover') %>
</div>
<div class="col-md-4">
<div class="row">
<!-- I would like the following div to display the lyrics of the
most recently clicked song from the above div ('.playlist'): -->
<div class="track-lyrics">
<%= simple_format(@song.lyrics) %>
</div>
</div>
</div>
</div>
</div>
希望这不会太令人困惑。我认为一些基本的javascript可以解决问题，但我开始怀疑这是否可能。或者，也许它需要进入更高级的脚本。也许它就像创建一个帮助程序方法一样简单，我不只是看到线索。
动态地将歌曲 ID 放在 Div 类中。
Div 类 ="<%= song.id %> ">
默认情况下隐藏所有这些。显示何时选择该歌曲 ID。